[elementUI] el-tree

控制节点

设置单选

show-checkbox 设置节点是否可被选择（多选）@check-change方法可设置为单选

checkChange(data, checked, indeterminate) {
    if (checked) {
        this.editCheckId = data.id
        this.$refs.tree.setCheckedKeys([data.id])
        // setCurrentNode 设置某个节点的当前选中状态,
        this.$refs.tree.setCurrentNode(data)
    } else {
        if (this.editCheckId === data.id) {
            // 点击已选中复选框，保证至少一个选中
            this.$refs.tree.setCheckedKeys([data.id])
            this.$refs.tree.setCurrentNode(data)
        }
    }
}

setCurrentNode 设置某个节点的当前选中状态

getCurrentNode 获取当前被选中节点的 data，若没有节点被选中则返回 null

el-tree 写成组件

被父组件调用时ref引用设置node/key等节点方法

<my-tree ref='childTree'></my-tree>
...
method: {
    getSelectNode() {
        // getSelectNodeChild 调用子组件方法
        const deptNode = this.$refs.childTree.getSelectNodeChild()
        // 获取到所选择的node节点信息
        ...
    }
}

子组件中

<el-tree ref='tree'></el-tree>
...
method: {
    // 获取选中的节点
    getSelectNodeChild() {
        return this.$refs.tree.getCurrentNode()
    },
    // 清空所选节点信息
    setCheckedKeysNull() {
        this.$nextTick(() => {
            this.$refs.tree.setCheckedNodes([])
        })
    },
}

懒加载自定义叶子节点

默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

加载子树数据的方法，仅当 lazy 属性为true时生效

<el-tree lazy :load='loadDeptNode' :props="defaultProps"></el-tree>
...
data() {
    return {
        deptTreeQuery: { id: '' },
        defaultProps: {
            children: 'children',
            label: 'text',
            isLeaf: 'isLeaf'
        },
    }
}
...
// 懒加载子节点
loadDeptNode(node, resolve) {
    this.deptTreeQuery = { id: node.data.fullPath}
    if (node.level === 0) return
    getBaseDept(this.deptTreeQuery).then(res => {
        if (res.code === 0) {
            const childrenData = res.data
            if (childrenData.length === 0) {
              node.isLeaf = true // 叶子
              resolve([])
              return
            }
            resolve(childrenData)
        } else {
            this.$message.error(res.msg)
        }
    })
}

props配置选项