vue+ elementv UI 使用Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点

 elementv UI 中的Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点（或者选中该父节本身）如图所示：

 

<template>
  <div>
    <el-tree :data="deviceList"
             ref="tree"
             :props="defaultProps"
             node-key="id"
             :default-expanded-keys="expendArr"
             highlight-current
             @node-click="handleNodeClick">
    </el-tree>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        deviceList: [
          {
            id:'0',
            label:'父节点1',
            children:[
              {
                id:'0-0',
                label:'子节点1-1',
              },
              {
                id:'0-1',
                label:'子节点1-2',
              },
            ]
          },
          {
            id:'1',
            label:'父节点2',
            children:[
              {
                id:'1-0',
                label:'子节点2-1',
              },
              {
                id:'1-1',
                label:'子节点2-2',
              },
            ]
          }
        ],
        expendArr: [],// 展开的节点的 key 的数组
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      }
    },
    methods:{
      handleNodeClick(data) {
        this.expendArr.push(data.id)
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(data.id);
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  // 改变树状图选中背景色
  /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #d5e7fd;
  }
</style>