vue el-table 树结构选中逻辑

 

 上代码！

<!-- html -->
<el-table :data="tableData" stripe border style="width: 98%" ref="tableRef"
            default-expand-all :indent="0" :span-method="spanMethod" 
            @select="handleSelectionChange" @select-all="selectAll" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="time" label="时间" align="center"></el-table-column>
      <el-table-column prop="thing" label="事件" align="center"></el-table-column>
      <el-table-column prop="place" label="地点" align="center"></el-table-column>
</el-table>

// 数据结构
data() {
    return {
        multipleSelection: [],
        sonSelection: [],
        checkedLength: 0, // 全局定义父表的选中数量
        dataLength: 0, // table所有父表数量
        isSelectAll: false,
        tableData: [
            {
                id:'1',
                sameIdentify: 'one',
                name:"西瓜家族",
                children:[
                    {
                        id: '1_1',
                        sameIdentify: "one",
                        name: '有籽西瓜',
                        age: '1天',
                        time: '2020/01/01',
                        thing: '播种',
                        place: '田里',
                    },
                    {
                        id: '1_2',
                        sameIdentify: "one",
                        name: '无籽西瓜',
                        age: '2个月',
                        time: '2020/03/01',
                        thing: '开刀',
                        place: '菜市场',
                    },
                ]
            },
            {
                id:'2',
                sameIdentify: 'two',
                name:"柚子家族",
                children:[
                    {
                        id: '2_1',
                        sameIdentify: "two",
                        name: '白柚',
                        age: '1天',
                        time: '2020/01/01',
                        thing: '播种',
                        place: '田里',
                    },
                    {
                        id: '2_2',
                        sameIdentify: "two",
                        name: '红柚',
                        age: '2个月',
                        time: '2020/03/01',
                        thing: '开刀',
                        place: '菜市场',
                    },
                ]
            },
        ]
    };
  },

created() {
    this.tableData.forEach(item => {
        this.dataLength += item.children.length + 1
    })
},

// 合并父表行
spanMethod({ row, columnIndex }) {
      if (columnIndex === 2) {
        if (row.children && row.children.length > 0) {
          return {
            rowspan: 1,
            colspan: 5
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }
},

handleSelectionChange(val, row) {
      // row 拿到的是父表的数据，val是所有选中的数据，可能有父表的也可能有散落的子表的
      let checkedLength = val.length;
      const sameIdentify = row.sameIdentify; // 子表和父表的一个一样值的字段
      
      if (row.children && row.children.length > 0) { // 操作的是父表
        if (this.checkedLength < val.length) { // 父表选中，让当前父表下的子表选中
          row.children.forEach(citem => {
            this.$refs.multipleTable.toggleRowSelection(citem, true)
            ++checkedLength;
          })
        } else {
          row.children.forEach(citem => { // 父表取消选中，让当前父表下的子表取消选中
            this.$refs.multipleTable.toggleRowSelection(citem, false)
            --checkedLength;
          })
        }
      } else { // 操作的是子表
        let curParentItem = this.tableData.find(item => item.sameIdentify== sameIdentify) // 找到该子表的父表
        if (this.checkedLength < val.length) { // 子表选中
          let length = 0;
          val.forEach(item => {
            if (item.sameIdentify== row.sameIdentify) { // 在已选中的值中找到与该中子表项为同一个父类下的个数
              length++
            }
          })
          if (length == curParentItem.children.length) { // 子表都选中了，让父表选中
            this.$refs.multipleTable.toggleRowSelection(curParentItem, true)
            ++checkedLength;
          }
        } else { // 子表取消选中
          this.$refs.multipleTable.toggleRowSelection(curParentItem, false) // 让父表全选取消选中
          --checkedLength;
        }
      }
      this.checkedLength = checkedLength;
      this.multipleSelection = this.$refs.multipleTable.selection;

      if (this.multipleSelection.length == this.dataLength) { // 表头是否全选
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }

      // 子表选中数据操作
      this.sonSelection = this.multipleSelection.filter(item => item.children == undefined)
    }

// 表头全选
    selectAll(val) {
      this.isSelectAll = !this.isSelectAll
      let checkedLength = val.length;
      // 全选
      if (this.isSelectAll) {
        val.forEach(item => {
          if (item.children && item.children.length > 0) {
            item.children.forEach(citem => {
              this.$refs.multipleTable.toggleRowSelection(citem, true)
              ++checkedLength
            })
          }
        })
      } else {
        this.$refs.multipleTable.clearSelection()
        checkedLength = 0
      }
      this.checkedLength = checkedLength
      // 子表选中数据操作
      this.multipleSelection = this.$refs.multipleTable.selection;
      this.sonSelection = this.multipleSelection.filter(item => item.children == undefined)
    }

-------------------------

over 如果有问题或者更好建议欢迎留言~