El-tree加载完成后默认触发点击事件非默认选中（上）选中第一个节点点击

前言

最近工作使用Vue+ElementUI来进行开发，遇到部门树功能的时候选择了el-tree组件来展示，功能都完成了，但需要在加载完成后默认点击第一个节点，从而查询右侧对应的部门人员信息，但官方没有提供相关的方法。查询了很多博客和论坛，发现都没有比较好的方法，所以我决定自己实现一个。

实现思路

有两种方法可以实现。

1. 利用El-tree的default-expand-all属性，在加载完成之后，会默认展开所有的节点，这时候第一个节点也是默认选中的。
2. 利用El-tree的default-checked属性，在加载完成之后，会默认选中第一个节点。

代码实现

方法一

<el-tree
  :data="data"
  :default-expand-all="true"
  @node-click="handleNodeClick"
>
</el-tree>

export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '部门1',
          children: [
            {
              id: 2,
              label: '员工1'
            },
            {
              id: 3,
              label: '员工2'
            }
          ]
        },
        {
          id: 4,
          label: '部门2',
          children: [
            {
              id: 5,
              label: '员工3'
            },
            {
              id: 6,
              label: '员工4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}

方法二

<el-tree
  :data="data"
  :default-checked-keys="['1']"
  @node-click="handleNodeClick"
>
</el-tree>

export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '部门1',
          children: [
            {
              id: 2,
              label: '员工1'
            },
            {
              id: 3,
              label: '员工2'
            }
          ]
        },
        {
          id: 4,
          label: '部门2',
          children: [
            {
              id: 5,
              label: '员工3'
            },
            {
              id: 6,
              label: '员工4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}

总结

以上两种方法都可以实现El-tree加载完成后默认触发点击事件并选中第一个节点。第一种方法是利用El-tree的default-expand-all属性，在加载完成之后，会默认展开所有的节点，这时候第一个节点也是默认选中的。第二种方法是利用El-tree的default-checked属性，在加载完成之后，会默认选中第一个节点。两种方法各有优缺点，第一种方法比较简单，但会默认展开所有的节点，可能会影响性能。第二种方法比较复杂，但可以只默认选中第一个节点，不会影响性能。