博客

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>

3.

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

4.

getCheckedKeys——若节点可被选择（即

show-checkbox

为

true

），则返回目前被选中的节点的 key 所组成的数组

getHalfCheckedKey——若节点可被选择（即

show-checkbox

为

true

），则返回目前半选中的节点的 key 所组成的数组

实例（获得当前树形控件被选中以及半选中的Key,并将Key数组转化为以‘，’分隔的字符串）

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

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