Element Table 表格树形结构多选框选中父级时会选中子级

前言：第一次写文章，因为自己的技术深度，广度都不够，所以一直惧怕写文章，一直都是看别人的文章。去年年终总结的时候定下一个计划，就是发布一篇有深度的文章，奈何深度一直不够。就先发布一篇有水分的文章试一哈水，不喜勿喷，有好的建议和想法可以提出来大家一起学习。小女子经受不住打击。

实现效果

实现逻辑和代码

html代码

<el-table
      :data="renderDynamic"
      ref="product"
      border
      row-key="producttypeId"
      :row-class-name="rowClassNameFun" //表格行样式
      :header-row-class-name="headerRowClassName" //表格头样式
      size="mini"
      max-height="500px"
      style="width: 100%"
      @select="selectFun" //复选框点击事件
      @select-all="selectAllFun" //表格全选事件
      @selection-change="selectionChange"
      :header-cell-style="{ background: '#fafafa' }"
    >

表格数据添加是否选中的标志

isSelect状态：true为选中状态，false为未选中状态 ，空字符串为未知状态

this.renderDynamic.forEach((item)=>{
 item.isSelect = false; //默认为不选中
})

复选框点击事件

 selectFun(selection, row) {
      this.setRowIsSelect(row);
    },

复选框点击事件

setRowIsSelect(row) {
     //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
      if (row.isSelect === "") {
        row.isSelect = false;
        this.$refs.product.toggleRowSelection(row, true);
      }
      row.isSelect = !row.isSelect;
      //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选
      if (row.children && row.children.length > 0) {
        row.children.forEach((item) => {
          item.isSelect = row.isSelect;
          this.$refs.product.toggleRowSelection(item, row.isSelect);
        });
      } else {
        //操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
        let parentId = row.parentId;

        this.renderDynamic.forEach((item) => {
          let isAllSelect = [];
          if (item.id == parentId) {
            item.children.forEach((childrenItem) => {
              isAllSelect.push(childrenItem.isSelect);
            });
            if (
              isAllSelect.every((selectItem) => {
                return true == selectItem;
              })
            ) {
              item.isSelect = true;
              this.$refs.product.toggleRowSelection(item, true);
            } else if (
              isAllSelect.every((selectItem) => {
                return false == selectItem;
              })
            ) {
              item.isSelect = false;
              this.$refs.product.toggleRowSelection(item, false);
            } else {
              item.isSelect = "";
            }
          }
        });
      }
    },

检测表格数据是否全选

    checkIsAllSelect() {
      this.oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        this.oneProductIsSelect.push(item.isSelect);
      });
      //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
      let isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
        return true == selectStatusItem;
      });
      return isAllSelect;
    },

表格全选事件

 selectAllFun(selection) {
      let isAllSelect = this.checkIsAllSelect();
      this.renderDynamic.forEach((item) => {
        item.isSelect = isAllSelect;
         this.$refs.product.toggleRowSelection(item, !isAllSelect);
        this.selectFun(selection, item);
      });
    },

表格行样式 当当前行的状态为不明确状态时，添加样式，使其复选框为不明确状态样式

  rowClassNameFun({ row }) {
      if (row.isSelect === "") {
        return "indeterminate";
      }
    },

表格标题样式 当一级目录有为不明确状态时，添加样式，使其全选复选框为不明确状态样式

 headerRowClassName({ row }) {
      let oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        oneProductIsSelect.push(item.isSelect);
      });
      if (oneProductIsSelect.includes("")) {
        return "indeterminate";
      }
      return "";
    },

更改复选框样式代码

.avue-form:not(.avue--detail) .indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.avue-form.avue--detail .indeterminate .el-checkbox__input .el-checkbox__inner {
    background-color: #F2F6FC;
    border-color: #DCDFE6;
}
.avue-form.avue--detail .indeterminate .el-checkbox__input .el-checkbox__inner::after {
     border-color: #C0C4CC !important; 
        background-color: #C0C4CC;
}

.avue--detail .product-show th .el-checkbox__inner{
    display: none !important;

}

.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
  width: auto !important;
}
.product-show .el-checkbox__inner {
   display: block !important; 
}

.product-show .el-checkbox {
   display: block !important; 
}