buildadmin将普通表格转化为树状表格

将普通表格转化为树状表格

首先创建树状表格的DDL

DROP TABLE IF EXISTS `bro_treetable_example`;
CREATE TABLE `bro_treetable_example`  (`id` int UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',`pid` int UNSIGNED NOT NULL DEFAULT 0 COMMENT '上级',`name` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '名称',`create_time` int UNSIGNED NULL DEFAULT NULL COMMENT '创建时间',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '树状表格示例表' ROW_FORMAT = Dynamic;

使用buildadmin后台进行crud生成控制器

寻找树状表格的vue文件

[treetable下的index.vue]

<!-- 树状表格必看 -->
<!-- 1. 不需要分页，所以第19行实现了隐藏分页组件 -->
<!-- 2. 为了显示需要，通常将 `树状` 字段设置为第一个字段，并且该字段对齐方式为 `left`，请参考第42行 -->
<!-- 3. 请注意第13行，其中的 unfold 可以在表头增加一个 `展开/收缩` 树状表格的按钮 -->
<!-- 4. 本文件内，除以上注意事项外，树状表格与普通表格无差别 -->

<!-- 1. 不需要分页，所以第19行实现了隐藏分页组件 --><Table ref="tableRef" :pagination="false" />

<!-- 2. 为了显示需要，通常将 `树状` 字段设置为第一个字段，并且该字段对齐方式为 `left`，请参考第42行 -->
{ label: t('treetable.name'), prop: 'name', align: 'left', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },

<!-- 3. 请注意第13行，其中的 unfold 可以在表头增加一个 `展开/收缩` 树状表格的按钮 --><TableHeader  :buttons="['refresh', 'add', 'edit', 'delete', 'unfold':"必须增加的tab栏展开", 'comSearch', 'quickSearch', 'columnDisplay']" :quick-search-placeholder="t('Quick search placeholder', { fields: t('examples.treetable.quick Search Fields') })" />

[treetable下的popupForm.vue]

<!-- 树状表格必看 -->
<!-- 1. 29-40行的远程下拉组件用于选择上级，它只是一个普通的远程下拉，只是设置了额外的 isTree 属性 -->
<!-- 2. 76-89行的表单验证规则用于禁止上级为当前数据 -->
<!-- 3. 本文件内，除以上注意事项外，树状表格表单与普通表格的表单无差别 -->

<!-- 1. 29-40行的远程下拉组件用于选择上级，它只是一个普通的远程下拉，只是设置了额外的 isTree 属性 -->
<FormItemtype="remoteSelect"prop="pid":label="t('examples.treetable.pid')"v-model="baTable.form.items!.pid":placeholder="t('Click select')":input-attr="{params: { isTree: true },field: 'name','remote-url': baTable.api.actionUrl.get('index'),}" 
/>

<!-- 2. 76-89行的表单验证规则用于禁止上级为当前数据 -->
pid: [{validator: (rule: any, val: string, callback: Function) => {if (!val) {return callback()}if (parseInt(val) == parseInt(baTable.form.items!.id)) {return callback(new Error(t('auth.menu.The superior menu rule cannot be the rule itself')))}return callback()},trigger: 'blur',},
],

最后控制器中重写index方法

 /*** 重写查看方法* @throws Throwable*/public function index(): void{$this->request->filter(['strip_tags', 'trim']);list($where, $alias) = $this->queryBuilder();$res = $this->model->field($this->indexField)->alias($alias)->where($where)->select()->toArray();/*** 树状表格必看注释一* 1. 获取表格数据（没有分页，所以简化了以上的数据查询代码）* 2. 递归的根据指定字段组装 children 数组，此时直接给前端，表格就可以正常的渲染为树状了，一个方法搞定*/$res = $this->tree->assembleChild($res);if ($this->request->param('select')) {/*** 树状表格必看注释二* 1. 在远程 select 中，数据要成树状显示，需要对数据做一些改动* 2. 通过已组装好 children 的数据，建立`树枝`结构，并最终合并为一个二维数组方便渲染* 3. 简单讲就是把组装好 children 的数据，给以下这两个方法即可*/$res = $this->tree->assembleTree($this->tree->getTreeArray($res));}$this->success('', ['list'   => $res,'remark' => get_route_remark(),]);}

呈现结果