技術標籤：elemtent UIVue.jsvue.jsjavascript

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>