Element Table 테이블 트리 구조 다중 선택 상자에서 모 레벨을 선택하면 중간 레벨(반복 레벨)이 선택됩니다.

효과를 실현하다
논리 및 코드 구현
html 코드

데이터

  data() {
    return {
      renderDynamic: [
        {
          id: 1,
          parentId: 0,
          date: "2016-05-02",
          name: "   ",
          address: "           1518  ",
        },
        {
          id: 2,
          parentId: 0,
          date: "2016-05-01",
          name: "   ",
          address: "           1519  ",
          children: [
            {
              id: 3,
              parentId: 2,
              date: "2016-05-01",
              name: "   ",
              address: "           1519  ",
              children: [
                {
                  id: 4,
                  parentId: 3,
                  date: "2016-05-01",
                  name: "   ",
                  address: "           1519  ",
                },
                {
                  id: 5,
                  parentId: 3,
                  date: "2016-05-01",
                  name: "   ",
                  address: "           1519  ",
                },
              ],
            },
            {
              id: 6,
              parentId: 2,
              date: "2016-05-01",
              name: "   ",
              address: "           1519  ",
            },
          ],
        },
      ],
    };
  },

선택한 플래그를 테이블 데이터에 추가할지 여부
isSelect 상태:true 는 선택 상태,false 는 선택 해제 상태,빈 문자열은 알 수 없는 상태
데이터 초기화

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

플래그 필드 설정

//     
 initData(data) {
      data.forEach((item) => {
        item.isSelect = false; //      
        if (item.children && item.children.length) {
          this.initData(item.children);
        }
      });
    },

확인란 클릭 이벤트

 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;
      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) {
        //       parantId =0       ，  1
        //       parantId !=0              3
        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 = {};
      //       
      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) {
        //         1、       2、         ，                ，      ，       ，      ，        
          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 = "";
            }
            //     
            if(item.parentId!=0) {
                operateLastLeve(item)
            }
      }
      //                    ，      ，             

      //1、     2、    ，     3、    
      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);
      }
    },

테이블 데이터의 전체 선택 여부를 체크합니다.

    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 "";
    },

체크 상자 스타일 코드 변경

.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;
}