这是示例代码要达到的效果: 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 !
要达到你想要的目的,你需要在<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的条件来排除自己和自己的子集部门。
请注意,这只是一个示例代码,具体的实现可能需要根据你的业务逻辑进行调整。
原文地址: https://www.cveoy.top/t/topic/i9eR 著作权归作者所有。请勿转载和采集!