element-ui树形控件（tree）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui树形控件（tree）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.基础用法

<el-tree :data="data" :props="treeProps"></el-tree>

            //树形控件的属性绑定对象
            treeProps: {
                children: 'children',
                label: 'authName',
            },

通过:data绑定了数据源，通过:props绑定了属性绑定对象，其中label代表着我们看到的是哪个属性对应的值，children代表父子节点通过哪个属性实现嵌套的

2.为树形控件添加show-checkbox属性，可实现复选框效果。如果要求选中的是文本对应的id值，而不是文本值本身。可以使用node-key属性。

node-key——每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

default-expand-all——是否默认展开所有节点（默认false,true为展开）

<el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" 
default-expand-all></el-tree>

default-expanded-keys——默认展开的节点的 key 的数组

getCheckedKeys——若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组

getHalfCheckedKey——若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组

实例（获得当前树形控件被选中以及半选中的Key,并将Key数组转化为以‘，’分隔的字符串）文章来源地址https://www.toymoban.com/news/detail-537840.html

  allotRights() {
            const keyArr = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys(),
            ];

            //转换成以，分隔的字符串
            const keyStr= keyArr.join(',');
            console.log(keyStr)
        },

到了这里，关于element-ui树形控件（tree）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！