当前位置:   article > 正文

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

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

1.整体思路

  1. 问题:数据量太大了,导致接口返回数据时间较长。
  2. 解决: 将ElementUi中Table组件加载改为懒加载(查看文档)。
  3. 思路:初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单;后台只用有一个根据菜单id查询他子菜单的接口就可以。
  4. 拓展问题对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
推荐阅读
相关标签
  

闽ICP备14008679号