基于element-ui实现的多级树形带复选框的表格

项目开发过程中，碰到一个需求，后端返回表格数据，但是子节点的个数不确定，最多为5个节点，并且每一列带有复选框以用于单个和批量设置。

项目所使用的技术为，在此基础上，为每一行加上。 以下，为本次所实现的核心代码。 第一步，表格设置和复选框监听

// el-table设置row-key="id"（必须唯一性）
   和:tree-props="{children: childlist, hasChildren: hasChillist}"
   根据后端返回的字段进行设置和是否使用懒加载
   <el-table-column>
     <template slot-scope="scope">
       <el-checkbox v-model="scope.row.checked"  :change="checkChange(scope)">
       </el-checkbox>
      </template>
</el-table-column>

第二步，监听函数

checkChange(scope){
	if(scope.row.hasChild){
        this.handleCheckAll(scope.row,scope.row.checked)
      }
    this.getParent(this.problemList.childlist,scope.row.Id, scope.row.checked)
}

第三步，复选框逻辑函数，思路如下，当点击的复选框含有子节点haschild时，执行handleCheckAll函数，并且递归执行，那么全选或者全不选时逻辑就完成了；当选中所有子节点时，父节点也被选中，和取消一个被全选的子节点，父节点也取消选中时逻辑如下，需要后端返回子节点ID，查找父节点所存在的子节点长度和选中个数，如果选中个数等于其子节点长度则父节点被选中，反之，父节点被取消选中。

handleCheckAll(row,checked){
	row.checked = checked;
      if(row.hasChild){
        let that = this
        row.childlist.forEach( (element,i) => {
          that.handleCheckAll(row.childlist[i],checked);
        })
      }
}
getParent(data2, nodeId2, isChecked){
      var arrRes = [];
      if (data2.length == 0) {
          if (!!nodeId2) {
              arrRes.push(data2)
          }
          return arrRes;
      }
      let rev = (data, nodeId) => {
          for (var i = 0, length = data.length; i < length; i++) {
              let node = data[i];
              if (node.Id == nodeId) {
                  arrRes.push(node)
                  rev(data2, node.parentId);
                  break;
              }
              else {
                  if (!!node.childlist) {
                      rev(node.childlist, nodeId);
                  }
              }
          }
          return arrRes;
      };
      arrRes = rev(data2, nodeId2);
      arrRes.forEach((item,i)=>{
        if (!item.hasChild) {
          item.checked = isChecked;
        } else {
          var num = 0;
          item.childlist.forEach((item,i) => {
            if (item.checked == true) {
              num+=1;
            }
          })
          if (num == item.childlist.length) {
            item.checked = true;
          } else {
            item.checked = false;
          }
        }
      });
}

实现效果如下

最后，后续代码会再次优化，有简便的思路也可以提供给我，一起加油！！！? ? ?