element中tree的使用心得

element的tree 树形控件的使用还是比较多的，从中也学到了不少的知识，以下是自己在使用中获得的一些心得！

this.treeData = [
    {
      id: 1,
      label: "中国",
      color: "red",
      children: [
        {
          id: 100,
          label: "江苏",
          children: [
            {
              id: 101,
              label: "南京",
              color: "blue",
              //图片地址
              logoPath: "xx.jpg",
            },
            {
              id: 102,
              label: "苏州",
            },
            {
              id: 103,
              label: "无锡",
            },
          ],
        },
      ],
    },
  ];

<el-tree
  :data="treeData"
  show-checkbox
  :check-strictly="true"    设置父子互相关联，才能取到单独的数据
  ref="tree"
  node-key="id"
  @check="handleCheck"  
  @check-change="handleCheckChange"     
  :props="treeProp"
  default-expand-all   
>
  <span slot-scope="{ node, data }">
  	<img :src="data.logoPath" class="treeIcon" v-if="data.logoPath" />
    <span :style="{ color: data.color }">
      {{ data.label }}
    </span>
  </span>
</el-tree>

node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的，子级与父级的id也不能相同，否则在设置自定义勾选时会出现混乱因为在对数据遍历时需要进行递归处理，如果父级id与子级id相同就会先遍历到父级id，但你需要勾选到的是子级的id，就会相互冲突。

1.如何自定义节点的内容？
使用插槽，scoped-slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。

2.如何禁用某些节点？
例如以上设置有子节点的父节点就置灰，不可用。

3.如何设置勾选了父级，但不勾选子级？

:check-strictly="true"

4.设置要勾选的节点
此处要传数组，这个方法控制所有被勾选的数据

setCheckedKeys(key) {
    this.$refs.tree.setCheckedKeys(key);
},

5.清空选中的节点

resetChecked() {
   this.$refs.tree.setCheckedKeys([]);
},