关于element中树形结构表格需求案例以及踩的坑

前言

工作中，难免我们会遇到树形结构的表格+勾选项这种需求，比如下图：

这两个是我在实际开发项目中开发的 ，重点就是表格中树形结构后，对于子集勾选项的勾选状态的问题。下面就让我顺着代码，先阐述下实现过程。

实现过程

template中

先使用element组件中的 组件，如下图：

其中row-key 就是当前表格数据的唯一标识id；

tree-props可以设置元素的子级字段，例如树形结构都是以child进行嵌套的话就这样写：

:tree-props="{children:'child',hasChildren:'hasChildren'}"

data中

tableData：树形结构的数组

checkedKeys：记录是否全选的状态

methods方法中

如上所述，表格上主要是两个方法，selectAll和handleSelection。

如果不使用这两个方法，那么勾选表格数据的时候，如果有子级数据，那么勾选父级数据的时候，子级数据不会被跟着勾选哈~

selectAll方法：全选or取消全选的时候，改变表格中所有数据的勾选项状态

由于这个是树形结构，众所周知，树形结构少不了递归遍历，实现代码如下：

selectAll() { 
    this.checkedKeys = !this.checkedKeys //改变全选的状态
    this.splitData(this.tableData,this.checkedKeys) //遍历列表中的数据
}
splitData(data,flag) {
    data.forEach(row => {
        this.$refs.treeTable.toggleRowSelection(row,flag) //通过ref获取表格，调用toggleRowSelection方法，改变数据的勾选状态        
        if(row.children && row.children.length != 0) { 
            this.splitData(row.children) //如果还有子级，进行递归遍历
        }
    })
}

handleSelection方法：点击单个数据的时候，改变勾选项状态，若点的单个数据下有子级数据，也要改变子集的勾选状态。

handleSelection(_,row) {
    if(!row.children) {
        return false
    }
    if(this.$refs.treeTable.selection.includes(row)) { //判断当前勾选的数据是否是已经勾选过的
        this.checkRow(row.children,true) //递归遍历子级数据
    } else {
        this.checkRow(row.children,false) //递归遍历子级数据
    }
}
checkRow(data,bool){
    data.forEach(item => {
        this.$refs.treeTable.toggleRowSelection(item,bool)
        if(item.children && item.children.length != 0) {
            this.checkRow(item.children,bool)
        }
    })
}

如上两种方法就实现了全选以及部分勾选改变数据勾选状态的问题。

获取勾选数据项：

只需要通过ref，调用selection即可，就能获取到当前勾选的哪些数据了。

console.log(this.$refs.treeTable.selection)

踩坑

各位友友们，看到我前面截取的实现后的效果，是模态框哈，那么坑就来了~

尝试下来发现个bug：如果在模态框中使用el-table，并且带勾选项,只要一改变数据的勾选状态，就会让整个模态框闪动一下，emm，具体也不知道怎么描述，就跟眼花了一下一样0.0

最终锁定到了原因，是该死的css样式！！

表格外面的模态框不能使用定位那种方式

如下图

主要就是这里引起了，所以我改成了：

这样避免使用定位，而使用flex布局，闪动就消失了(＾－＾)V

大家可以尝试着感受一波哈~

原文链接：https://juejin.cn/post/7356214996760215563 作者：wenLi