要达到你想要的目的,你需要在<el-tree-select>组件中设置filter-node-method属性,并定义一个过滤方法。在过滤方法中,你可以根据当前选择的parentId来过滤部门列表,只显示父级或兄弟级部门,并禁用自己和自己的子集。

以下是修改后的代码示例:

<template>
  <el-form-item label="上级部门" prop="parentId">
    <el-tree-select v-model="formData.parentId" clearable :data="filteredDeptList" node-key="id" check-strictly
      :default-expanded-keys="[formData.parentId]" :default-checked-keys="[formData.parentId]"
      :props="{ label: 'deptName', value: 'deptId' }" :suffix-icon="CaretBottom" style="width: 450px"
      :filter-node-method="filterNode" />
  </el-form-item>
</template>

<script>
import { ref, computed } from 'vue';
import { Tree } from 'element-plus';

export default {
  setup() {
    const deptList = ref<DeptPageVO[]>([]);

    const formData = ref({
      parentId: null, // 初始值为null
      // 其他表单数据...
    });

    // 过滤部门列表,只显示父级或兄弟级部门,并禁用自己和自己的子集
    const filteredDeptList = computed(() => {
      const parentId = formData.value.parentId;
      if (parentId) {
        return deptList.value.filter(dept => dept.id !== parentId && dept.parentId !== parentId);
      } else {
        return deptList.value;
      }
    });

    // 过滤方法
    const filterNode = (value: string, data: Tree) => {
      if (!value) return true;
      return data.label.includes(value);
    };

    return {
      deptList,
      formData,
      filteredDeptList,
      filterNode,
    };
  },
};
</script>

在这个示例中,filteredDeptList是一个计算属性,它根据当前选择的parentId来过滤部门列表。在过滤方法中,我们使用了dept.id !== parentId && dept.parentId !== parentId的条件来排除自己和自己的子集部门。

请注意,这只是一个示例代码,具体的实现可能需要根据你的业务逻辑进行调整。

这是示例代码要达到的效果: el-tree ref=treeRef class=filter-tree data=data props=defaultProps default-expand-all filter-node-method=filterNode const filterNode = value string data Tree = if !

原文地址: https://www.cveoy.top/t/topic/i9eR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录