el-table树形表格实现复选框多选效果

最新推荐文章于 2024-06-23 19:45:10 发布

敲代码无敌小奶龙

最新推荐文章于 2024-06-23 19:45:10 发布

阅读量3k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_53986004/article/details/131936239

版权

文章讲述了在处理树形表格时遇到的全选问题，即点击全选仅选中一级表格数据。通过提供HTML和JS代码示例，介绍了解决方案，即使用递归方法遍历所有子节点，确保每一层的数据在全选时都能被选中。

摘要由CSDN通过智能技术生成

2023.7.26今天我学习了如何使用树形表格的时候进行复选框的多选效果。

当我们使用树形结构表格需要进行多选功能操作的时候会发现点击全选的时候，只有一级表格数据会被选中，问题如图：

我们需要实现的是点击全选的不管是几级表格数据都可以被选中。

处理方法如下：

html代码如下：

 <el-table :data="typeList" :key="curryId"  row-key="id"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              ref="table"
              @selection-change="selection_all_operation_record"
              @select-all="handleSelectAll"
    >

</el-table>

js代码如下：

methods:{

  handleSelectAll() {
      for (let item of this.typeList) {
        this.selectChildren(item)
      }
    },
    selectChildren(item) {
      if (item.children != null) {
        for (let childItem of item.children) {
          this.selectChildren(childItem)
          this.$refs.table.toggleRowSelection(childItem)
        }
      }
    },
}

通过递归的方式来给每一层数据都可以被选中。

效果如下：