0
点赞
收藏
分享

微信扫一扫

elementui el-tree的使用方法

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

elementui 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)

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

elementui el-tree的使用方法_结点_02

举报

相关推荐

0 条评论