element的Table表格组件树形数据与懒加载简单使用

1. 代码实现

<template><div><!-- lazy 是否懒加载子节点数据 --><!-- load 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 --><!-- :default-expand-all="defaultExpandAll" 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效  --><!-- expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 --><!-- row-click 当某一行被点击时会触发该事件 --><!-- expand-change 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	 --><el-table ref="tableRef" :data="deptList" row-key="deptId" :lazy="true" :load="load":tree-props="{ children: 'children', hasChildren: 'existSub' }" :expand-row-keys="expandRowKeys"@row-click="(row, column, e) => clickRowLoad(row, column, e)" @expand-change="handleExpandChange"><el-table-column prop="deptName" label="名称" min-width="260" /><el-table-column prop="orderNum" label="排序" /><el-table-column label="创建时间" align="center" prop="createTime" min-width="200"><template slot-scope="scope"><span>{{ (scope.row.createTime) }}</span></template></el-table-column><el-table-column label="操作" align="center" fixed="right" min-width="220"><template slot-scope="scope"><el-button size="mini" type="primary" @click.stop="clickHandle(scope.row)">查看</el-button></template></el-table-column></el-table></div>
</template><script>export default {name: "TablePage3",data() {return {// 模拟数据1deptList_01: [{"createTime": "2023-10-23 11:39:03","deptId": 2104,"deptName": "部门1","parentName": null,"parentId": 0,"orderNum": 0,"children": [],"existSub": true,},{"createTime": "2023-10-23 11:39:03","deptId": 2105,"deptName": "部门2","parentName": null,"parentId": 0,"orderNum": 1,"children": [],"existSub": true,},{"createTime": "2023-10-23 11:39:03","deptId": 2106,"deptName": "部门3","parentName": null,"parentId": 0,"orderNum": 2,"children": [],"existSub": false,}],// 模拟数据2deptList_02: [{"createTime": "2023-10-23 11:39:03","deptId": 21041,"deptName": "部门1-1","parentName": null,"parentId": 2104,"orderNum": 1,"children": [],"existSub": false,},{"createTime": "2023-10-23 11:39:03","deptId": 21042,"deptName": "部门1-2","parentName": null,"parentId": 2104,"orderNum": 1,"children": [],"existSub": false,},],// 模拟数据3deptList_03: [{"createTime": "2023-10-23 11:39:03","deptId": 21051,"deptName": "部门2-1","parentName": null,"parentId": 2105,"orderNum": 1,"children": [],"existSub": true,},],// 模拟数据4deptList_04: [{"createTime": "2023-10-23 11:39:03","deptId": 210511,"deptName": "部门2-1-1","parentName": null,"parentId": 21051,"orderNum": 1,"children": [],"existSub": false,},],// 部门表格树数据deptList: [],// 重新渲染表格状态refreshTable: true,//父级的IdparentId: '',expandRowKeys: [],};},mounted() {// 列表this.getList()},methods: {/** 查询列表 懒加载 */getList() {//根据实际项目调用接口// lazyList(this.queryParams).then(response => {//     console.log(response, 'response查询列表')//     this.deptList = response.data// }) // 模拟数据1this.deptList = this.deptList_01;this.deptList.forEach(item => {item.hasChildren = item.existSub})// 如果只是单纯的更新绑定的数据:是在重新加载时，清空对应ref下的这两个数据// this.$set(this.$refs["tableRef"].store.states, "lazyTreeNodeMap", {});// this.$set(this.$refs["tableRef"].store.states, "treeData", {});console.log(this.deptList, ' this.deptList')// ------------触发点击事件load------------------//一、-------默认展开了deptList的第一层所有数据的下级数据--------// 一、-------默认展开了deptList的第一层所有数据的下级数据(相当于自动点击了一次)--------this.openTreeHandle(this.deptList)//二、 展开所有行，（建议直接使用非懒加载，配置default-expand-all为true）},// 点击列表懒加载load(tree, treeNode, resolve) {console.log(tree, 'tree')// console.log(treeNode, 'treeNode')//根据实际项目调用接口，获取对应的下级数据// this.parentId = tree.deptId// lazyList(this.queryParams).then(res => {// console.log(res.data, 'res.data')// resolve(res.data)// })// 模拟数据2，模拟数据3, 模拟数据4let tempList = []if (tree.deptName == '部门1') {tempList = this.deptList_02} else if (tree.deptName == '部门2') {tempList = this.deptList_03} else if (tree.deptName == '部门2-1') {tempList = this.deptList_04}resolve(tempList)},// 一、-------根据接口得到deptList，根据实际需要获取需要展开的节点的id，也就是table绑定的row-key属性值（如deptId）--------openTreeHandle(deptList) {const deptId = deptList ? deptList.map(item => (item.deptId).toString()) : []// expandRowKeys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组// 这个必须配置，只有配置了这个，getElementsByClassName才能获取到对应的数据els，下面click事件才会触发this.expandRowKeys = this.expandRowKeys.concat(deptId)console.log(this.expandRowKeys, ' this.expandRowKeys')const els = document.getElementsByClassName('el-table__expand-icon el-table__expand-icon--expanded')this.$nextTick(() => {console.log(els, 'els')console.log(els.length, 'els.length')if (els.length > 0) {for (let i = 0; i < els.length; i++) {els[i].click()}}})},// 展开改变触发函数,只展开一行handleExpandChange(row, expandedRows) {// console.log(row, 'row')// console.log(expandedRows, 'expandedRows')if (expandedRows.length > 1) {this.$refs.tableRef.toggleRowExpansion(expandedRows[0])}},//点击整行load (能够点击一行的任意位置都可以进行伸缩)clickRowLoad(r, c, e) {if (e.currentTarget && e.currentTarget.firstElementChild.firstElementChild.firstElementChild) {console.log(e.currentTarget, 'e.currentTarget')if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == 'DIV') {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()} else {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()}}},clickHandle(row) {console.log(row, '点击')},},
};
</script>

2. 效果图

3. 解决新增、删除、修改之后树节点不刷新问题。（参考文章）