ElementuUI el-table 树型表格 checkbox多选框选择逻辑

热心网友C

已于 2022-03-21 14:06:24 修改

阅读量4.1k

点赞数 6

文章标签： elementui vue.js

于 2022-03-21 14:02:34 首次发布

本文链接：https://blog.csdn.net/caozhigang0724/article/details/123633393

版权

本文探讨了ElementUI中el-table组件的树形表格与checkbox多选框的选择逻辑。当子节点全选时，父节点会被选中；子节点部分选择时，父节点显示为半选状态；所有子节点未选中时，父节点不被选中。文中还提到了期待更优的实现方案，并鼓励交流讨论。

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

ElementuUI el-table 树型表格 checkbox多选框选择逻辑

如图所示：
在这里插入图片描述

逻辑：

子节点全部选择 => 父节点选择
子节点部分选择 => 父节点半选择
子节点全未选择 => 父节点不选择

代码部分如下：

<template>
  <div class="container">
    <el-table
          :data="tableData"
          border
          style="width: 100%"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children' ,hasChildren: 'children.length>0'}"
          ref="tableRef"
          @select="handletableSelect"
          @select-all="handletableSelectAll"
          @selection-change="handletableSelectionChange">
          
         <!-- 多选框列 -->
         <el-table-column
            type="selection"/>
 	     <!-- 
 	      id列 注意:该列很重要,必须是row-key 若不需要展示该列,
 	      则需要通过其他手段在行内标记row-key并自行修改
 	      updateCheckboxIndeterminate方法里的逻辑
 	      下边“半选择”状态需要用到
 	      -->
         <el-table-column
            prop="id"
            label="id"
          ></el-table-column>

		 <!-- ...其他字段 -->
		 
    </el-table>
  </div>
</template>

<script>
export default {
    
  name: "TreeTableCheckbox",
  data() {
    
    return {
    
      tableData: [
        {
    
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
    
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
    
          id: 3