前言:
做后台管理系统避免不了需要做项目字典管理,字典管理肯定是多级的一个树,所以就需要用的表格懒加载和表格树
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
row-key="id"
border
lazy
:load="getChildrens"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
<el-table-column label="分类名称" property="dictName" align=""> </el-table-column>
<el-table-column label="字典名称" property="dictValue" align="center"> </el-table-column>
<el-table-column label="字典编码" property="dictCode" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<el-link :underline="false" type="primary" @click="addDictionary(scope.row, 'add')">添加下级 </el-link>
</template>
</el-table-column>
</el-table>
// 获取顶级数据
getParentList() {
const params = {
current: this.pagination.current,
size: this.pagination.size,
querparam: {}
};
这里写接口url(params).then(res => {
if (res.success === true) {
this.dataToTal = res.data.total;
this.tableData = res.data.records.map((item: any, index) => {
item.hasChildren = item.child !== 0 ? true : false; //这里表示是否展示展开下级
return item;
});
this.parentOptions = this.tableData;
}
});
}
// 获取子级
getChildrens(tree, treeNode, resolve) {
这里写接口url({ parentId: tree.id }).then(res => {
if (res.data.length && res.data.length > 0) {
const data = res.data.map(item => {
item.hasChildren = item.child !== 0 ? true : false;
return item;
});
resolve(data); // 这里是加载子级数据的必须resolve()
} else {
tree.hasChildren = false;
}
});
}
新增/添加/删除分类/分类下的字典(不是第一级)时需要更新列表,这时子级是懒加载的,解决办法就是简单粗暴:1:刷新页面(体验不好,没操作一次页面整体刷新) 2:
// 子级添加/删除/编辑以后更新数据
refreshRow() {
this.$set(this.$refs.multipleTable.store.states, 'lazyTreeNodeMap', {});
this.$set(this.$refs.multipleTable.store.states, 'treeData', {});
}
这时展开的列表会收起来,可以再次通过点击父级去查看新增/编辑/修改的子级;
3:当然还有更完美的解决办法:记录当前点击的父节点,然后编辑完成以后再根据父节点去重新请求一次子节点,有个方法是默认展开,太麻烦了我就没做。。。。。。