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

前言

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

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

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

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

实现过程

template中

先使用element组件中的 组件,如下图:

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

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

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

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

data中

tableData:树形结构的数组

checkedKeys:记录是否全选的状态

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

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)

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

踩坑

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

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

最终锁定到了原因,是该死的css样式!!

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

如下图

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

主要就是这里引起了,所以我改成了:

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

这样避免使用定位,而使用flex布局,闪动就消失了(^-^)V

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

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

(0)
上一