Implementation effect

Implement logic and code

The HTML code

  <el-table
      :data="renderDynamic"
      ref="product"
      border
      row-key="id"
      :row-class-name="rowClassNameFun"
      :header-row-class-name="headerRowClassName"
      size="mini"
      max-height="500px"
      style="width: 100%"
      @select="selectFun"
      @select-all="selectAllFun"
      :header-cell-style="{ background: '#fafafa' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="Date" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="Name" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="Address"> </el-table-column>
    </el-table>
Copy the code

The data of data

  data() {
    return {
      renderDynamic: [{id: 1.parentId: 0.date: "2016-05-02".name: "Wang Xiaohu".address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai}, {id: 2.parentId: 0.date: "2016-05-01".name: "Wang Xiaohu".address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai.children: [{id: 3.parentId: 2.date: "2016-05-01".name: "Wang Xiaohu".address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai.children: [{id: 4.parentId: 3.date: "2016-05-01".name: "Wang Xiaohu".address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai}, {id: 5.parentId: 3.date: "2016-05-01".name: "Wang Xiaohu".address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai,},],}, {id: 6.parentId: 2.date: "2016-05-01".name: "Wang Xiaohu".address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai,},],},],}; },Copy the code

Table data adds a flag for whether to check

IsSelect: true indicates that the string is selected, false indicates that the string is not selected, and the empty string is unknown

Initialize data

   mounted() {
    this.initData(this.renderDynamic);
  },

Copy the code

Set flag field

// Initialize the data
 initData(data) {
      data.forEach((item) = > {
        item.isSelect = false; // This parameter is not selected by default
        if (item.children && item.children.length) {
          this.initData(item.children); }}); },Copy the code

Check box click events

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

Check box click events

setRowIsSelect(row) {
      // When the parent check box is clicked, the current state may be unknown, so the current row state is set to false and selected to achieve the effect of selecting all child points
      if (row.isSelect === "") {
        row.isSelect = false;
        this.$refs.product.toggleRowSelection(row, true); } row.isSelect = ! row.isSelect;let that = this;

      function selectAllChildrens(data) {
        data.forEach((item) = > {
          item.isSelect = row.isSelect;
          that.$refs.product.toggleRowSelection(item, row.isSelect);
          if(item.children && item.children.length) { selectAllChildrens(item.children); }}); }function getSelectStatus(selectStatuaArr, data) {
        data.forEach((childrenItem) = > {
          selectStatuaArr.push(childrenItem.isSelect);
          if(childrenItem.children && childrenItem.children.length) { getSelectStatus(selectStatuaArr, childrenItem.children); }});return selectStatuaArr;
      }
      function getLevelStatus(row) {
        // If the current node has parantId =0 and child nodes, it is 1
        // If parantId! =0 and the child node has no child node
        if (row.parentId == 0) {
          if (row.children && row.children.length) {
            return 1;
          }else{
              return 4; }}else {
          if(! row.children || ! row.children.length) {return 3;
          } else {
            return 2; }}}let result = {};
      // Get an explicit node
      function getExplicitNode(data,parentId) {
           data.forEach((item) = > {
               if(item.id == parentId) {
                  result = item;
               }
               if(item.children && item.children.length) { getExplicitNode(item.children,parentId); }})return result;
      }
      function operateLastLeve(row) {
        If the parent node is selected, the parent node is selected; if the parent node is selected, the parent node is not selected; if the parent node is selected, the parent node is not selected; if the parent node is selected, the parent node is not selected
          let selectStatuaArr = [];
          let item = getExplicitNode(that.renderDynamic,row.parentId);
            selectStatuaArr = getSelectStatus(selectStatuaArr, item.children);
            if (
              selectStatuaArr.every((selectItem) = > {
                return true == selectItem;
              })
            ) {
              item.isSelect = true;
              that.$refs.product.toggleRowSelection(item, true);
            } else if (
              selectStatuaArr.every((selectItem) = > {
                return false == selectItem;
              })
            ) {
              item.isSelect = false;
              that.$refs.product.toggleRowSelection(item, false);
            } else {
              item.isSelect = "";
            }
            // There is a parent
            if(item.parentId! =0) {
                operateLastLeve(item)
            }
      }
      // Check whether the check box is operated by the child or the parent. If it is the parent, control whether the child is selected fully or not

      // select * from parent; // select * from parent
      let levelSataus = getLevelStatus(row);
      if (levelSataus == 1) {
        selectAllChildrens(row.children);
      } else if (levelSataus == 2) {
        selectAllChildrens(row.children);
        operateLastLeve(row);
      } else if(levelSataus == 3) { operateLastLeve(row); }},Copy the code

Check whether all table data is selected

    checkIsAllSelect() {
      this.oneProductIsSelect = [];
      this.renderDynamic.forEach((item) = > {
        this.oneProductIsSelect.push(item.isSelect);
      });
      // Check whether the first-level products are all selected. If tier 1 products are all true, disable all; otherwise, select all
      let isAllSelect = this.oneProductIsSelect.every((selectStatusItem) = > {
        return true == selectStatusItem;
      });
      return isAllSelect;
    },
Copy the code

Table all selected events

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

Table Row Style When the current row is in an ambiguous state, add a style so that the checkbox is in an ambiguous state

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

Table Title Style When a level 1 directory has an undefined state, add a style to make it all check boxes undefined state style

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

Change the check box style code

.indeterminate .el-checkbox__input .el-checkbox__inner { background-color: #409eff ! important; border-color: #409eff ! important; color: #fff ! important; } .indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {transform: scale(0.5); } .indeterminate .el-checkbox__input .el-checkbox__inner { background-color: #f2f6fc; border-color: #dcdfe6; } .indeterminate .el-checkbox__input .el-checkbox__inner::after { border-color: #c0c4cc ! important; background-color: #c0c4cc; } .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; }Copy the code