element-ui 使用el-tree相关问题

element-ui 使用el-tree相关问题

最近，在实际工作中使用el-tree的时候遇到了很多的问题，尤其是对我这种前端小白来说，花费了很长时间才解决了，希望本次的分享能够对大家有帮助。

el-tree的使用

首先一点，肯定是要使用我们的el-tree标签，然后在这颗树上绑定我们所需的数据（data）

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

通过上面的代码我们也发现了，它还有个需要一个props参数，它的具体解释如下图：
最后一个参数就是，@node-click，这是它的选中事件，当我们点击它的某个节点时可以对其进行选择，上面就是对el-tree的基本使用啦，具体的其他详细内容请移步到element官网去看：https://element.eleme.cn/#/zh-CN/component/tree

自定义el-tree树节点内容

 在我们实际的开发过程中，仅仅使用官方提供的内容给我们使用是远远不够，我们需要根据实际工作中的需求来自定义树节点。

<el-tree
          node-key="id"
          :default-expanded-keys="defaultSelected"
          :data="treeData"
          show-checkbox
          :props="defaultProps"
          :default-checked-keys="defaultSelected"
          @check="getChecked"
          ref="elTree"
        >
          <span class="custom-tree-node btn-none" slot-scope="{ node, data }">
            <span v-if="node.level === 1">全部</span>
            <span v-if="node.level === 2">{{ data.jgmc }}</span>
            <span v-if="node.level === 3" style="width: 100%">
              <span>
                <span>{{ data.snNumber }}</span>
                <span>{{ data.sbz}}</span>
              </span>
              <span v-show="$props.gjObj.lx === '0'">{{ data.gjbb }}</span>
            </span>
          </span>
        </el-tree>

通过上面的代码我们可以看出，如果我们需要自定义节点那就直接在我们的el-tree里面直接定义我们需要的内容就好了，这个地方的slot-scope="{ node, data }里面就是我们每个节点的数据。废话不多说了，直接上图：

清空el-tree

使用官方提供的setCheckedNodes方法即可设置目前勾选的节点，但是使用此方法必须设置 node-key 属性，**注意：node-key的属性值在整棵树中必须是唯一的。**具体代码实现如下：

this.$refs.elTree.setCheckedKeys([]);

需要注意的一点就是,很多小伙伴在使用此方法的时候无法清空所选中节点的内容，那是因为你没有在你的树上面设置ref="elTree"属性。
本文可能还有许多不足的地方，还希望各位小伙伴能够多加指导！