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

前言

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

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

实现过程

template中

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

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

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

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

data中

tableData:树形结构的数组

checkedKeys:记录是否全选的状态

methods方法中

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

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

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

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

kotlin 复制代码
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方法:点击单个数据的时候,改变勾选项状态,若点的单个数据下有子级数据,也要改变子集的勾选状态。

kotlin 复制代码
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即可,就能获取到当前勾选的哪些数据了。

arduino 复制代码
console.log(this.$refs.treeTable.selection)

踩坑

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

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

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

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

如下图

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

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

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

相关推荐
abigale0320 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者39 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile43 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app