第三十四节：用户新增编辑弹窗增加 el‑tree‑select 部门选择器

目标：在用户弹窗里实现下拉树形选择部门，新增 / 编辑用户可以绑定部门 deptId，提交保存到接口。

技术点：el-tree-select，下拉框内嵌树形组件。

1、修改用户弹窗组件 UserDialog.vue

src/views/system/user/components/UserDialog.vue

复制代码

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑用户' : '新增用户'"
    width="520px"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="formData.nickName" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入手机号" />
      </el-form-item>
      <!-- 新增：部门树形选择器 -->
      <el-form-item label="归属部门" prop="deptId">
        <el-tree-select
          v-model="formData.deptId"
          :data="deptTreeData"
          placeholder="请选择部门"
          node-key="id"
          :props="{ label:'deptName', children:'children' }"
          check-strictly
          style="width:100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getDeptTree } from '@/api/dept'

const props = defineProps({
  visible: { type: Boolean, default: false },
  rowData: { type: Object, default: null }
})
const emit = defineEmits(['update:visible', 'success'])

const dialogVisible = ref(false)
const formRef = ref(null)
const isEdit = ref(false)
//部门树数据
const deptTreeData = ref([])

const formData = ref({
  id: null,
  username: '',
  nickName: '',
  phone: '',
  deptId: null
})

const formRules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
})

watch(() => props.visible, async val => {
  dialogVisible.value = val
  if (val) {
    //弹窗打开加载部门树
    const res = await getDeptTree()
    deptTreeData.value = res.data
    openDialog()
  }
})

function openDialog() {
  formRef.value?.resetFields()
  if (props.rowData) {
    //编辑回显
    isEdit.value = true
    formData.value = { ...props.rowData }
  } else {
    //新增清空
    isEdit.value = false
    formData.value = {
      id: null,
      username: '',
      nickName: '',
      phone: '',
      deptId: null
    }
  }
}

async function submitForm() {
  await formRef.value.validate()
  emit('success', { form: formData.value, isEdit: isEdit.value })
  dialogVisible.value = false
}

function handleClose() {
  emit('update:visible', false)
}
</script>

重点属性说明

node-key="id"：树节点唯一标识，必须配置
check‑strictly：父子节点互不关联，选子节点不会自动选中父节点，业务更符合部门选择
v‑model="formData.deptId"：绑定选中部门 id，提交表单一起传给后端

2、mock 接口确认

新增用户接口 /api/user/add、编辑接口 /api/user/update 接收 deptId 参数即可，mock 只打印 body，不需要额外处理。

测试步骤

打开新增用户弹窗，下拉框可以展开部门树，能选择总公司、研发部、市场部。
选择部门，提交表单，控制台 mock 可以看到提交数据携带deptId。
编辑已有用户，打开弹窗，自动回显该用户所属部门。
保存完成回到用户列表，左侧部门树点击，依然可以按部门筛选表格。

当前模块完成：

用户管理：查询、新增编辑弹窗（带部门树选择）、删除、批量删除、左侧部门树筛选、excel 导入导出、按钮权限。