下拉菜单（handleCommand($event, row.id)）

<template>
  <div class="container">
    <div class="app-container">
      <MyTree :data="deptList">
        <template #right="{ row }">
          <el-col :span="4" class="right">
            <span class="managerName">
              {{ row.managerName }}
            </span>
            <el-dropdown @command="handleCommand($event, row.id)">
              <span class="el-dropdown-link">
                操作
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </template>
      </MyTree>
      <MyDialog ref="dialogRef" :title="behavior.title" :on-close="onClose" :on-confirm="onConfirm">
        <template #body>
          <MyForm
            ref="deptformRef"
            :form-item="behavior.formItem"
            :form-data="behavior.formData"
            :rules="behavior.rules"
            label-width="150px"
          />
        </template>
      </MyDialog>
    </div>
  </div>
</template>

<script>
import MyTree from '@/components/CustomTree'
import MyDialog from '@/components/CustomDialog'
import MyForm from '@/components/CustomForm'
import { getFormItem } from '@/components/CustomForm/config/deptbehaviorConfig'
import { getDept, addDept } from '@/api/department'
import { transListToTree } from '@/utils/transListToTree'
export default {
  name: 'Department',
  components: {
    MyTree,
    MyDialog,
    MyForm
  },
  data() {
    return {
      deptList: [],
      behavior: {
        type: 'add',
        title: '新增子部门',
        formItem: [],
        formData: {},
        rules: {},
        currNodeId: null
      }
    }
  },
  async created() {
    this.getDept()
    this.behavior.formItem = await getFormItem()
    // 初始化表单数据和校验规则
    this.behavior.formItem.forEach((item) => {
      this.$set(this.behavior.formData, item.field, '')
      this.$set(this.behavior.rules, item.prop, item.rule)
    })
  },
  methods: {
    // 获取组织架构
    async getDept() {
      const res = await getDept()
      this.deptList = transListToTree(res, 0)
    },
    // 显示弹框
    handleCommand(type, id) {
      this.$refs.dialogRef.dialogVisible = true
      if (type === 'add') {
        this.behavior.title = '添加子部门'
        this.behavior.type === 'add'
        this.behavior.currNodeId = id
        console.log(id)
      } else if (type === 'edit') {
        this.behavior.title = '编辑部门'
        this.behavior.type === 'edit'
      } else {
        this.onClose()
        console.log('删除')
      }
    },
    // 关闭弹框
    onClose() {
      this.$refs.dialogRef.dialogVisible = false
      this.$refs.deptformRef.$refs.formRef.resetFields()
    },
    // 确认提交
    async onConfirm() {
      await this.$refs.deptformRef.$refs.formRef.validate()
      if (this.behavior.type === 'add') {
        await addDept({ ...this.behavior.formData, pid: this.behavior.currNodeId })
        this.$message.success('添加成功')
        this.getDept()
        this.onClose()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  .app-container {
    height: 90vh;
    // overflow: hidden;
    overflow-y: scroll;
    .el-tree {
      margin: 80px 160px 0 160px;
      .right {
        font-size: 14px;
        display: flex;
        width: 220px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>

封装的组件
CustomTree/index.vue

<template>
  <el-tree
    :data="data"
    :show-checkbox="showCheckBox"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    :current-node-key="currNodeKey"
    :highlight-current="ishighlightCurrent"
    :style="`width:${width}`"
  >
    <el-row slot-scope="{ data }" style="width: 100%; height: 40px" class="custom-tree-node">
      <el-col>{{ data.name }}</el-col>
      <slot name="right" :row="data" />
    </el-row>
  </el-tree>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: ''
    },
    showCheckBox: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    currNodeKey: {
      type: Number,
      default: null
    },
    ishighlightCurrent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

CustomDialog/index.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :width="width"
    :fullscreen="fullscreen"
    @close="onClose"
  >
    <slot name="body" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    onConfirm: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    issueEvent(value, mouseEvent) {
      if (mouseEvent) {
        return mouseEvent(value)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>