Element ui学习之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。