vue3 element-plus 树状表格无限层级复选框勾选取消实现

<template>
  <div class="home">
    <div class="table-wrap">
      <el-table
        class="tylTable"
        ref="tableEle"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :row-class-name="rowClassNameFun"
        @select="select"
        @select-all="selectAll"
        @selection-change="selectionChange"
        >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column prop="a1"  label="备注1"   />
        <el-table-column prop="a2" label="工作内容"    />
        <el-table-column prop="a3" label="编号"  align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Home',
  setup() {
    let currentId = ref(2)
    let tableData = ref([
      {
        id:'1',
        parentId:'0',
        a1:111111111,
        a2:222222222,
        a3:333333333,
        children:[
          {
            id:'1-1',
            parentId:'1',
            a1:'xxxxxxxxx',
            a2:'yyyyyyyyy',
            a3:'zzzzzzzzzzzz',
            children:[
              {
                id:'1-1-1',
                parentId:'1-1',
                a1:'aaaaaaaaa',
                a2:'bbbbbbbbb',
                a3:'cccccccccc',
                children:[]
              }
            ]
          },
          {
            id:'1-2',
            parentId:'1',
            a1:'xxxxxxxxx',
            a2:'yyyyyyyyy',
            a3:'zzzzzzzzzzzz',
            children:[
              {
                id:'1-2-1',
                parentId:'1-2',
                a1:'aaaaaaaaa',
                a2:'bbbbbbbbb',
                a3:'cccccccccc',
                children:[]
              },
              {
                id:'1-2-2',
                parentId:'1-2',
                a1:'aaaaaaaaa',
                a2:'bbbbbbbbb',
                a3:'cccccccccc',
                children:[]
              }
            ]
          }
        ]
      },
      {
        id:'2',
        parentId:'0',
        a1:4444444444,
        a2:5555555555,
        a3:6666666666,
        children:[]
      }
    ])
    let tableEle = ref(null)
    let isIndeterminateMap = ref({}); 

    
    function initStatusMap(data){
      data.forEach(ele => {
        isIndeterminateMap.value[ele.id] = false
        if(ele.children && ele.children.length){
          initStatusMap(ele.children)
        }
      })
    }
    initStatusMap(tableData.value)
    console.log('isIndeterminateMap', isIndeterminateMap.value);


    
    function lookForAllId(data, findId){
      let result
      for(let i=0; i<data.length;i++){
        if(data[i].id == findId){
          return data[i]
        }
        if(data[i].children && data[i].children.length){
          result =  lookForAllId(data[i].children,findId)
        }
      }
      return result
    }

    
     const selectSonHandle = (ele,isSelect) => {
        ele.map(j => {
          tableEle.value.toggleRowSelection(j, isSelect)
          isIndeterminateMap.value[j.id] = isSelect
          if (j.children) {
            selectSonHandle(j.children,isSelect)
          }
        })
      }

    // 点击复选框事件
    const select = (selection, row) => {
      let isSelect  = isIndeterminateMap.value[row.id] 
      if(isSelect == 'indeterminate'){
        isSelect = true
        isIndeterminateMap.value[row.id] = true;
      }else{
        isSelect = !isSelect
        isIndeterminateMap.value[row.id] = isSelect
      }
      
      if(row.children&&row.children.length){
        selectSonHandle(row.children, isSelect)
      }
      
      let parentId = row.parentId
      console.log('parentId',parentId);
      handlelook(row,parentId)
    }

    
    function handlelook(row, parentId){
      
      if(row.parentId && row.parentId !== '0'){
          let ele = lookForAllId(tableData.value,parentId) 
          if(ele){
              let isALLTrue = selectStatus(ele,true);
              let isALLFalse = selectStatus(ele,false);
              if ( isALLTrue ){
                  console.log('全选');
                  isIndeterminateMap.value[ele.id] = true;
                  tableEle.value.toggleRowSelection(ele, true)
              } else if ( isALLFalse ) {
                  console.log('全不选');
                  isIndeterminateMap.value[ele.id] = false;
                  tableEle.value.toggleRowSelection(ele, false)
              } else {
                  console.log('不明确');
                  tableEle.value.toggleRowSelection(ele, false) 
                  isIndeterminateMap.value[ele.id] = "indeterminate"; 
              }
          }
          if(ele.parentId !== '0'){
            handlelook(ele, ele.parentId)
          }
        }
    }

    // 点击全选框事件
    const selectAll = (selection) => {
      
      const isSelect = selection.some(el => {
        const leverOneIds = tableData.value.map(j => j.id)
        return leverOneIds.includes(el.id)
      })
      
      const isCancel = !tableData.value.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        console.log('全选');
        const allSelectionHandle = (el) => {
          isIndeterminateMap.value[el.id] = true 
          if (el.children && el.children.length) {
            
            el.children.map(j => {
              tableEle.value.toggleRowSelection(j, true)
              isIndeterminateMap.value[j.id] = true
              allSelectionHandle(j)
            })
          }
        }
        selection.map(el => {
          allSelectionHandle(el)
        })
      }
      if (isCancel) {
        console.log('全不选');
        const CancelHandle = (el) => {
          isIndeterminateMap.value[el.id] = false 
          if (el.children && el.children.length) {
            
            el.children.map(j => {
              tableEle.value.toggleRowSelection(j, false)
              isIndeterminateMap.value[j.id] = false
              CancelHandle(j)
            })
          }
        }
        tableData.value.map(el => {
          CancelHandle(el)
        })
      }
    }
    
    const selectStatus = (item,status=true)=>{
        let isAllSelect = [];
        item.children.forEach((childrenItem) => {
            isAllSelect.push(isIndeterminateMap.value[childrenItem.id]);
        });
        let isStauts = isAllSelect.every((selectItem) => {
            return status == selectItem;
        })
        return isStauts
    }

    
    const rowClassNameFun = ({row }) => {
      let isSelect = isIndeterminateMap.value[row.id];
      if (isSelect == "indeterminate") {
          return "indeterminate";
      }
    }

    return {
      isIndeterminateMap,
      currentId,
      tableEle,
      tableData,
      select,
      selectAll,
      rowClassNameFun,
    }
  }
}
</script>

<style >
.table-wrap{
  width: 600px;
  overflow: hidden;
  margin: 80px auto 0;
}

.indeterminate .el-checkbox__input .el-checkbox__inner{
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}
.indeterminate .el-checkbox__input .el-checkbox__inner::after{
  border-color: #C0C4CC !important; 
  background-color: #C0C4CC;
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
  width: auto !important;
}
</style>