vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题

作者：菜鸟追梦旅行 | 2024-04-19 23:57:57

踩

1.整体思路

问题：数据量太大了，导致接口返回数据时间较长。
解决: 将ElementUi中Table组件加载改为懒加载（查看文档）。
思路：初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单；后台只用有一个根据菜单id查询他子菜单的接口就可以。
拓展问题：对table树增删改查后，会存在table菜单节点不刷新问题，实际数据已经刷新。（改成懒加载后, 加载很快.；但是子菜单加载一次之后就被缓存了,在怎么点击也不会重新去请求后台；这个也导致了在我们增删改排序等操作菜单之后, 页面对应的菜单节点没有更新, 实际数据已变更.；整体刷新一下页面的话会显示正确, 不过不可能每次更新之后,强制刷新页面吧，这样交互效果很不好）。
5.解决不刷新问题：刷新节点（修改了哪一行, 就拿到这一行数据的parentId, 然后去调用接口, 查到这个parentId下一级子菜单,查到数据之后塞回去就行了. 接口和页面加载的那个接口是复用的, 无非页面加载的时候parentId传的是0或者null）。
6.关键：
```
this.$set(this.$refs.pointMultipleTable.store.states.lazyTreeNodeMap, key, data)

// lazyTreeNodeMap: 就是this.$refs.table.store.states.lazyTreeNodeMap

//  key：就是table-key，相当于父节点数据的id

// data：就是子节点数据

// this.$refs.pointMultipleTable注意这个pointMultipleTable是你的table属性:ref的名字
//	步骤 :
     // 1、先给table标签添加一个ref="pointMultipleTable"，ref可以自己随便自定义
    // 2、在点击父节点要添加一个子节点，或删除一个子节点后，已请求完后台接口后，拿到父节点id，和最新增删后的子节点数据xxxList
    // 3、最后调用 this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, id, xxxList);//根据父节点id更新子节点数据
1
2
3
4
5
6
7
8
9
10
11
12
13
```

2. 代码实现

<template>
    <div class="app-container">
        <el-table ref="pointMultipleTable" v-loading="loading" :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)">
            <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" class-name="small-padding fixed-width" min-width="200">
                <template slot-scope="scope">
                    <el-button  size="mini" type="text" icon="el-icon-edit"
                        @click.stop="handleUpdate(scope.row)">修改</el-button>
                    <el-button  size="mini" type="text" icon="el-icon-plus"
                        @click.stop="handleAdd(scope.row)">
                        新增</el-button>
                    <el-button  size="mini" type="text" icon="el-icon-delete"
                        @click.stop="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import {
    getDept,
    delDept,
    addDept,
    updateDept,
    lazyList
} from '@/api/manager/dept'

// 设置循环的默认值，判断是否调用openTreeHandle，触发点击事件，使得节点展开
let index = 1
export default {
    name: 'deptTree',
    components: {
    },
    data() {
        return {
            expandRowKeys: [],
            parentId: '',
            type: '',
            // treeNodeMap: new Map(),
            // 遮罩层
            loading: true,
            // 表格树数据
            deptList: [],
            // 查询参数
            queryParams: {
                parentId: undefined
            }
        }
    },
    created() {
        // 部门列表
        this.getList()
    },
    methods: {

        /** 查询部门列表 懒加载 */
        getList() {
            this.loading = true
            lazyList(this.queryParams).then(response => {
                console.log(response, 'response查询部门列表')
                this.deptList = response.data
                this.loading = false
                // 默认展开了deptList的第一层所有数据的下级数据(相当于自动点击了一次)
                this.openTreeHandle(this.deptList)
            })
        },
        // 点击列表懒加载
        load(tree, treeNode, resolve) {
            console.log(tree, 'tree')
            // 加载子节点时，对子节点进行赋值
            // this.treeNodeMap.set(tree.deptId, { tree, treeNode, resolve })

            this.queryParams.parentId = tree.deptId
            lazyList(this.queryParams).then(res => {
                console.log(res.data, 'res.data')
                // deptList的第一层展开后，如果还想展开下面层级，就设置index且调用if的方法。
                // index <= 1 就表示第一层基础上再展开一层，index <= 2，表示第一层的基础上再展开2层，一次类推
                // 如果只要默认展开一层，则不要再调用openTreeHandle方法即可。注释掉下面的if的index相关。
                if (index <= 1) {
                    this.openTreeHandle(res.data)
                }
                index++
                resolve(res.data)
            })
        },
        // 一、-------根据接口得到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()
                    }
                }
            })
        },

        // 点击整行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()
                }
            }
        },

        /** 新增按钮操作（获取到当前的deptId作为parentId） */
        handleAdd(row) {
            console.log('新增按钮操作', row)
            // 获取对应的父级id
            this.parentId = row.deptId
            this.type = 1
          //  .....................
        },
        /** 修改按钮操作（获取当前部门的父级的id，也就是parentId） */
        handleUpdate(row) {
            console.log('修改部门增', row)
            // 根据部门id 获取详情
            getDept(row.deptId).then(response => {
                console.log(response.data, 'response.data')
                // 最近的父级id
                this.parentId = response.data.parentId
                this.type = 2
                 //  .....................
            })
        },

        /** 提交按钮 */
        submitForm: function () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    updateDept(this.form).then(response => {
                        this.$modal.msgSuccess('修改成功')
                        this.queryParams.parentId = null
                        // 方式1：刷新table
                        this.reflushtable()
                        // 方式2、刷新table
                        // this.refreshData()
                         //  .....................
                    })
                } else {
                    addDept(this.form).then(response => {
                        this.$modal.msgSuccess('新增成功')
                        this.queryParams.parentId = null
                        // 方式1：刷新table
                        this.reflushtable()
                        // 方式2、刷新table
                        // this.refreshData()
                         //  .....................
                    })
                }
            })
        },

        // 刷新节点：方法1
        reflushtable() { // 解决菜单懒加载时.  更新,添加,删除 排序不更新的情况 （根据父级id获取子级数据）
            lazyList({
                parentId: this.parentId
            }).then(res => {
                console.log(res.data, 'res.data')
                this.$set(this.$refs.pointMultipleTable.store.states.lazyTreeNodeMap, this.parentId, res.data)
                // 展开父级节点
                if (this.type == 1) { // 新增
                    const pid = this.parentId.toString()
                    this.expandRowKeys = this.expandRowKeys.concat([pid])
                    console.log(this.expandRowKeys, ' this.expandRowKeys-----')
                }
            })
        },

        // 如果对应节点没有展开过，那获取节点时候会出现获取不到情况(这个我暂时没有找到解决办法)，
        //  this.treeNodeMap.get(this.parentId)找不到，在load中这个parentId没有存储过，故而获取不到。
        // 所以推荐使用上述方法1
        // 刷新节点：方法2
        refreshData() { 
            // 获取节点
            const node = this.treeNodeMap.get(this.parentId)
            // 获取需要刷新节点
            const { tree, treeNode, resolve } = node
            // 重新加载子节点数据
            this.load(tree, treeNode, resolve)
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$confirm('是否确认删除数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function () {
                    return delDept(row.deptId)
                })
                .then(() => {
                    this.queryParams.parentId = null
                    this.$modal.msgSuccess('删除成功')
                    // 方式1：刷新table
                    this.reflushtable()
                    // 方式2、刷新table
                    // this.refreshData()
                     //  .....................
                })
                .catch(() => { })
        }

    }
}
</script>
  
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230

3. 效果图

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/454276