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 {
            // 模拟数据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. 效果图

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