src/components/oa/orgTreeShow.vue

<template>
  <div class="org-tree-container">
    <el-tree
      ref="orgTree"
      :data="orgData"
      :props="defaultProps"
      node-key="id"
      default-expand-all
      highlight-current
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>
<script>
import { listOrgTree } from '@/api/oa/addAttendanceClassesStaffApi'
import { getCommunityId } from '@/api/community/communityApi'
export default {
  name: 'OrgTreeShow',
  data() {
    return {
      orgData: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      communityId: getCommunityId()
    }
  },
  methods: {
    async refreshTree() {
      try {
        const params = {
          communityId: this.communityId
        }
        const res = await listOrgTree(params)
        this.orgData = res.data
      } catch (error) {
        this.$message.error(this.$t('orgTree.loadFailed'))
      }
    },
    handleNodeClick(data) {
      this.$emit('switchOrg', {
        orgId: data.id,
        orgName: data.text
      })
    }
  },
  mounted() {
    this.refreshTree()
  }
}
</script>
<style lang="scss" scoped>
.org-tree-container {
  height: 500px;
  overflow-y: auto;
  padding: 10px;
  ::v-deep .el-tree {
    background-color: transparent;
    
    .el-tree-node__content {
      height: 36px;
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
    
    .is-current > .el-tree-node__content {
      background-color: #ecf5ff;
    }
  }
}
</style>