kd-aiot-frontend-wt/src/views/bpm/stockManagement/components/assetTree.vue

<template>
  <div class="tree-wrapper">
    <el-tree
      :data="treeList"
      :props="defaultProps"
      v-loading="treeLoading"
      :node-key="nodeKey"
      ref="tree"
      :highlight-current="true"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
      :default-expanded-keys="current && current.id ? [current.id] : []"
    >
    </el-tree>
  </div>
</template>

<script>
  import { getTreeByIds } from '@/api/classifyManage';

  export default {
    props: {
      defaultProps: {
        type: Object,
        default: function () {
          return {
            children: 'children',
            value: 'id',
            label: 'name'
          };
        }
      },
      // 初始请求treeList
      init: {
        type: Boolean,
        default: true
      },

      treeIds: {
        type: Array,
        default: []
      },
      nodeKey: {
        type: String,
        default: 'id'
      }
    },
    data() {
      return {
        treeList: [],
        treeLoading: false,
        current: {},
        currentKey: ''
      };
    },
    mounted() {
      if (this.init) {
        this.getTreeData();
      }
    },
    methods: {
      // 获取树结构数据
      getTreeData() {
        return new Promise(async (resolve) => {
          try {
            this.treeLoading = true;

            const res = await getTreeByIds({ ids: this.treeIds.join(',') });
            this.treeLoading = false;
            if (res?.code === '0') {
              this.treeList = res.data;
              this.$emit('setRootId', res.data[0]);

              this.$nextTick(() => {
                // 默认高亮第一级树节点
                if (this.treeList[0]) {
                  this.setCurrentKey(this.treeList[0]);
                  this.current = this.treeList[0];
                  // 默认点击加载数据
                  // const firstNode = document.querySelector('.el-tree-node');
                  // firstNode.click();
                  resolve(this.current);
                }
              });
              return this.treeList;
            }
          } catch (error) {
            console.log(error);
          }
          this.treeLoading = false;
        });
      },

      handleNodeClick(data, node) {
        this.$emit('handleNodeClick', data, node);
      },
      // 设置默认高亮行
      setCurrentKey(id) {
        this.currentKey = id;
        this.$refs.tree.setCurrentKey(this.currentKey);
      },

      // 获取树的选中状态
      getSelectList() {
        const selectList = this.$refs.tree.getCurrentNode();
        return selectList;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;

    :deep(.el-tree) {
      display: inline-block;
      min-width: 100%;
    }
  }
</style>