elementui el-tree的使用方法

el-tree 一般用于节点下有很多子节点

接口返回的数据格式，可以无线子节点

deptOptions:[{
            "id": "1686631142746230785",
            "label": "小王测试部门",
            "children": [
                  {
                         "id": "1686631774894952449",
                         "label": "小王二级",
                          "children": [
                                {
                                    "id": "1686632331651059714",
                                    "label": "小王三级"
                                }
                           ]
                    }
               ]
           }]
//对应节点属性名，如果后端传的数据格式或名称不一致
 defaultProps: {
         children: 'children',
         label: 'label',
}

使用方法

 <el-tree  :data="deptOptions" show-checkbox  ref="navTree" node-key="id" :check-strictly="false" empty-text="空内容" :props="defaultProps"></el-tree>

属性介绍

data：数据源

show-checkbox：显示复选框

empty-text：空内容

node-key：指定节点的key，作为每个节点的唯一标识

check-strictly：展示复选框的情况下，开启父子节点互不关联（默认为关联）

props：可配置该树的具体信息，包括指定树节点标签为对象的指定值，子树节点标签的指定值，树节点是否为叶子节点（仅在懒加载模式下生效）

ref :节点。

获取el-tree选中数据

// 选中结点对象数组
const checkList = this.$refs.navTree.getCheckedNodes()
// 选中结点ID（node-key的值）数组
let checkedKeys = this.$refs.navTree.getCheckedKeys()
 //  半选中数组（就是父节点下有没有全部被选中的节点）
let halfCheckedKeys = this.$refs.navTree.getHalfCheckedKeys()
console.log(checkList,checkedKeys,halfCheckedKeys)

三种方法分别对应不同的返回内容