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 {
// 模拟数据1
deptList_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,
}
],
// 模拟数据2
deptList_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,
},
],
// 模拟数据3
deptList_03: [
{
"createTime": "2023-10-23 11:39:03",
"deptId": 21051,
"deptName": "部门2-1",
"parentName": null,
"parentId": 2105,
"orderNum": 1,
"children": [],
"existSub": true,
},
],
// 模拟数据4
deptList_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,
//父级的Id
parentId: '',
expandRowKeys: [],
};
},
mounted() {
// 列表
this.getList()
},
methods: {
/** 查询列表 懒加载 */
getList() {
//根据实际项目调用接口
// lazyList(this.queryParams).then(response => {
// console.log(response, 'response查询列表')
// this.deptList = response.data
// })
// 模拟数据1
this.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, 模拟数据4
let 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. 效果图
文章来源地址https://www.toymoban.com/news/detail-779989.html
3. 解决新增、删除、修改之后树节点不刷新问题。（参考文章）
文章来源：https://www.toymoban.com/news/detail-779989.html
到了这里，关于element的Table表格组件树形数据与懒加载简单使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
