Element ui学习之Tree树形控件

<el-tree>

2.1 常用属性

(1)data

展示数据,类型为array

(2)props

配置选项,是一个对象,具体看下表

(3)load

         加载子树数据的方法,仅当 lazy 属性为true 时生效,类型是一个函数,function(node, resolve)

(4)lazy

     是否懒加载子节点,需与 load 方法结合使用,boolean类型,默认值为false,也就是不是懒加载(延迟加载)

(5)show-checkbox

     节点是否可被选择,类型为boolean,默认值为false,也就是不可被选择,即不显示checkbox

(6)node-key

       每个树节点用来作为唯一标识的属性,整棵树应该是唯一的。也就是id的含义,类型为string。

(7)default-expanded-keys

设置默认展开的结点,类型是array,表示默认展开的节点的 key 组成的数组

(8)default-checked-keys

设置默认选中的结点,类型是array,表示默认勾选的节点的 key 组成的数组

(9)禁用状态

   通过对data属性绑定的数据添加disabled属性设置禁用,将 Tree 的某些节点设置为禁用状态

(10)default-expand-all

    是否默认展开所有节点,类型是boolean,默认值是false

(11)highlight-current

     是否高亮当前选中节点,类型是boolean,默认值是false。

(12)accordion

     手风琴模式,是否限制同级结点每次只能展开一个,类型是boolean,默认值是false。

(12)filter-node-method

      在需要对节点进行过滤时,调用 Tree 实例的filter方法,参数为关键字。需要注意的是,此时需要设置filter-node-method,值为过滤函数。

     注意:此处Tree 实例的filter方法不是js中原生的filter方法。

例子:

     这个例子中,输入框绑定的变量filterText接收用户输入的关键字。并用watch对该变量进行监听,当该值发生变化(change)时即调用tree实例的filter方法,将改变后的输入值val传给filter。看一下tree实例的filter方法的详细介绍:

     可以知道,上述filter方法中将最新的关键字val作为其参数,这个参数也是filter-node-method中的第一个参数。而filter-node-method绑定的方法对tree数组的每个元素执行一次过滤,如果是true,则显示该节点;如果是false,则不显示该结点,因此实现了结点的过滤。

2.2 常用事件

(1)node-click

    节点被点击时的回调。

(2)check-change

     节点选中状态发生变化时的回调,也就是选中与不选中之间发生切换时触发事件。

     回调参数:共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点。

     例子:(给出的是事件绑定的方法)

handleCheckChange(data, checked, indeterminate)

console.log(data, checked, indeterminate);

}

2.3 常用方法

    Tree 内部使用了 Node 类型的对象来包装用户传入的数据,用来保存目前节点的状态。 下面给出常用的四个方法:

例子:组件的方法一般用refs来引用。本例展示如何获取和设置选中节点。获取和设置各有两种方式:通过 node 或通过 key如果需要通过 key 来获取或设置,则必须设置node-key。

猜你喜欢

转载自blog.csdn.net/qq_21428081/article/details/82354707