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。