Vue中使用el-table表单 在有children的情况下实现多选

---

前言：
element的el-form表单提供了两个功能：
1、多选（手动添加一个el-table-column，设type属性为selection即可）
2、树形数据功能（当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载）
但是这两个功能，element没有专门将其合，本文章就是将两个功能合二为一。

---

一、案例

直接放上图

二、使用步骤

1.引入库

在main.js中引入ElementUI组件：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

2.使用el-form

在需要表单的代码中使用el-form，代码如下（示例）：

---

template的数据

<template>
  <el-table
    ref="tableRef"
    :data="tableData"
    @select="rowSelect"
    @select-all="selectAll"
    @selection-change='selectChange'
    row-key="uuid"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    max-height="400"
    >
    <el-table-column :reserve-selection="true" type="selection" width="50" align="center"></el-table-column>
    <el-table-column prop="id" label="序号" width="200"></el-table-column>
    <el-table-column prop="tel" label="号码"></el-table-column>
    <el-table-column prop="createTime" label="创建时间">
      <template slot-scope="props">
        <span>{{props.row.createTime}}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

---

script的数据

<script>

export default {
  data() {
    return {
    	tableData: [  // 库中的音频
	      {
	        id: 1,
	        uuid: 1,
	        tel: '13888888888',
	        createTime: '2022/06/25   18:24:15',
	        children: [
	          {
	            uuid: 11,
	            tel: '我是音频名称.MP4',
	            createTime: '2022/06/25   18:24:15',
	          },
	          {
	            uuid: 12,
	            tel: '我是音频名称.MP4',
	            createTime: '2022/06/25   18:24:15',
	          },
	          {
	            uuid: 13,
	            tel: '我是音频名称.MP4',
	            createTime: '2022/06/25   18:24:15',
	          },
	        ]
	      },
	      {
	        id: 2,
	        uuid: 2,
	        tel: '13888888888',
	        createTime: '2022/06/25   18:24:15',
	        children: [
	          {
	            uuid: 21,
	            tel: '我是音频名称.MP4',
	            createTime: '2022/06/25   18:24:15',
	          },
	          {
	            uuid: 22,
	            tel: '我是音频名称.MP4',
	            createTime: '2022/06/25   18:24:15',
	          },
	          {
	            uuid: 23,
	            tel: '我是音频名称.MP4',
	            createTime: '2022/06/25   18:24:15',
	          },
	        ]
	      }
	    ]
	  }
  },
  methods:{
  	// 修改选中状态
    toggleSelection(rows, flag){
      if(rows){
        rows.forEach(row => {
          this.$refs.tableRef.toggleRowSelection(row, flag)
        } )
      }else {
        this.$refs.tableRef.clearSelection()
      }
    },

    // 选择行
    rowSelect(selection, row) {
      if(this.chooseNum == 'one'){ // 单选
        // selection.indexOf(row)为-1则是取消，其他则为选中
        if(selection.length > 0){
          for(let i = 0; i < selection.length; i++){
            if(selection[i].children){
              var isOne = false
              selection[i].children.filter(item => {
                if(item.uuid == row.uuid){ // 当前选中的子和已选的是同一个父
                  isOne = true
                }
              })
              if(!isOne){
                this.$refs.tableRef.clearSelection()
                this.$refs.tableRef.toggleRowSelection(row, true)
              }
            }
          }
        }
      }
      // selection.indexOf(row)为-1则是取消，其他则为选中
      // 选中父,则所有的子也被选中
      if (selection.indexOf(row) > -1 && row.children) {
        this.toggleSelection(row.children, true);
      }
      // 取消父,则所有的子也被取消
      if (selection.indexOf(row) === -1 && row.children) {
        this.toggleSelection(row.children, false);
      }
      // 选中子，父也被选中
      if (selection.indexOf(row) > -1 && !row.children) {
        for(let i = 0; i < this.tableData.length; i++){
          this.tableData[i].children.filter(item => {
            if (item.uuid === row.uuid) {
              this.$refs.tableRef.toggleRowSelection(this.tableData[i], true)
            }
          });
        }
      }
      // 取消子，父的子如果全被取消，父也被取消
      if (selection.indexOf(row) === -1 && !row.children) {
        var k = -1, isAllChoose = false
        // 找到父组件
        for(let i = 0; i < this.tableData.length; i++){
          this.tableData[i].children.filter(item => {
            if (item.uuid === row.uuid) {
              k = i
            }
          });
        }
        for(let j = 0; j < this.tableData[k].children.length; j++){
          // 当前的父 还有子没被取消
          if(selection.indexOf(this.tableData[k].children[j]) != -1){
            isAllChoose = true
          }
        }
        if(!isAllChoose){
          this.$refs.tableRef.toggleRowSelection(this.tableData[k], false)
        }
      }
    },

    // 全选
    selectAll(selection) {
      var flag = false; // 默认 为全不选
      selection.forEach(item => {
        if (item.children) {
          flag = true;
          this.toggleSelection(item.children, true);
        }
      });
      if (!flag) {
        this.toggleSelection();
      }
    },

    selectChange(val){
      console.log(val);
    },
  },
}
</script>

---

总结

1、从el-table的select方法着手，对父子的选中和取消做判断
2、从el-table的select-all方法着手，用于取消全部的勾选项