agmp_wpr_vue/src/components/DataReportLeft/index.vue

<template>
  <div>
    <el-tree
     :data="treeData"
     ref="tree"
     node-key="id"
     :highlight-current="true"
     :default-expanded-keys="[1]"
     :current-node-key="currentNodekey"
     :props="defaultProps"
     @node-click="handleNodeClick"
     ></el-tree>
  </div>
</template>
<script>
export default {
  name: 'dataReportLeft',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultProps:{
        children: 'children',
        label: 'cusareaName'
      },
      currentNodekey: ''
    };
  },
  watch: {
    treeData: { 
      handler(res) {
        this.currentNodekey = res[0].id;
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodekey);
        });
      },
      deep: true
    }
  },
  methods: {
    handleNodeClick(data) {
      this.$emit("setCurrentData",data?.cusareaId,data)
    }
  }
};
</script>
<style lang="sass" scoped>

</style>