elementui 树形懒加载实现全选

572 阅读1分钟
// 使用check-change判断勾选状态
<el-tree
  element-loading-spinner="el-icon-loading"
  :data="treeData"
  node-key="id"
  :load="loadTree"
  ref="orgTrees"
  lazy
  :props="treeProps"
  :show-checkbox="true"
  :default-expanded-keys="defaultExpanded"
  @check-change="checkChange"
  @node-click="nodeClick">
  <span slot-scope="{node}">
</el-tree>

方法:

loadTree(node, resolve){
    // 懒加载树形数据
    resolve(nodeData)
    // 如果选中
   if(node.checked) {
     this.$refs.orgTrees.setChecked(node.data.orgId, true, true)
     this.defaultExpanded.push(node.data.orgId)
     this.pushCheckBox(node)
   }
},

/** 组织机构多选勾选状态发生变化时

     * val: 数组中节点对应的对象

     * val2: 节点本身是否被选中

     * val3: 节点子树中是否有被选中的节点

  */
checkChange(val, val2, val3){
  if(val2) {
    let node = this.$refs.orgTrees.getNode(val)
    if(node.isLeaf) {
      // 子节点时 todoList
    }else{
     // 选中的不是子节点,则手动触发加载该节点下的子节点
      node.loadData()
    }
  }else{
    // todoList
},

// 递归添加选中节点(多选)
pushCheckBox(node) {
  if(node.isLeaf) {
    // todoList
    return
  }else{
    // 不是子节点,则如果该节点还没加载子节点,则请求接口加载,有子节点遍历子节点
    if(node.childNodes && node.childNodes.length > 0) {
      node.childNodes.forEach(item => {
        item.loadData()
      })
    }
  }
},