1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <!-- 部门树 -->
- <template>
- <el-card shadow="never">
- <el-input v-model="deptName" placeholder="部门名称" clearable>
- <template #prefix>
- <i-ep-search />
- </template>
- </el-input>
- <el-tree
- ref="deptTreeRef"
- class="mt-2"
- :data="deptList"
- :props="{ children: 'children', label: 'deptName', disabled: '' }"
- :expand-on-click-node="false"
- :filter-node-method="handleFilter"
- highlight-current
- default-expand-all
- @node-click="handleNodeClick"
- />
- </el-card>
- </template>
- <script setup lang="ts">
- import { treeList } from "@/api/system/dept";
- const props = defineProps({
- modelValue: {
- type: [String],
- default: undefined,
- },
- });
- const deptList = ref<OptionType[]>(); // 部门列表
- const deptTreeRef = ref(ElTree); // 部门树
- const deptName = ref(); // 部门名称
- const emits = defineEmits(["node-click", "update:modelValue"]);
- const deptId = useVModel(props, "modelValue", emits);
- watchEffect?.(
- () => {
- deptTreeRef.value.filter(deptName.value);
- },
- {
- flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发,此属性控制在DOM元素更新后运行
- }
- );
- /** 部门筛选 */
- function handleFilter(value: string, data: any) {
- if (!value) {
- return true;
- }
- return data.deptName.indexOf(value) !== -1;
- }
- /** 部门树节点 Click */
- function handleNodeClick(data: { [key: string]: any }) {
- deptId.value = data.id;
- emits("node-click");
- }
- onBeforeMount?.(() => {
- treeList().then((response) => {
- if (response.data) {
- deptId.value = response.data[0].id;
- emits("node-click");
- }
- deptList.value = response.data;
- });
- });
- </script>
|