部门树形下拉可以筛选查询

src/components/Select/SelectDept.vue

@@ -1,84 +1,56 @@
 <template>
 	<el-tree-select
-		class="w100"
-		v-model="state.selectId"
-		:data="state.options"
-		@visible-change="(e: boolean) => e && getOptions()"
+		v-model="selectId"
+		:data="deptOptions"
 		:props="{ value: 'id', label: 'name', children: 'children' }"
+		class="w100"
+		filterable
 		clearable
 		check-strictly
 		:render-after-expand="false"
-		:placeholder="props.placeholder"
+		:placeholder="placeholder"
+		@change="handleChange"
 	/>
 </template>
 
-<script setup lang="ts" name="select-dept">
-import { reactive } from "vue"
-import * as deptApi from "/@/api/admin/dept"
+<script setup lang="ts" name="SelectDept">
+import { ref, onMounted } from "vue"
+import { deptTree } from "/@/api/admin/dept"
+import { useMessage } from "/@/hooks/message"
 
 const selectId = defineModel()
 
-export type Props = {
-	placeholder?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-	placeholder: "请选择",
-})
-
-const queryForm = reactive<any>({
-	name: "",
-	current: 1,
-	size: 10,
-})
-
-const state = reactive<any>({
-	loading: true,
-	selectId: selectId,
-	options: [],
-})
-
-watch(
-	selectId,
-	(newVal, oldValue) => {
-		if (newVal == oldValue) return
-		state.selectId = newVal
-		getOptions()
+defineProps({
+	placeholder: {
+		type: String,
+		default: "请选择部门",
 	},
-	{ immediate: true },
-)
+})
 
-async function getOptions() {
+const emit = defineEmits(["update:modelValue", "change"])
+
+const deptOptions = ref<any[]>([])
+
+// 加载部门树数据
+const loadDeptTree = async () => {
 	try {
-		state.loading = true
-		const _pa = {
-			...queryForm,
+		const res = await deptTree()
+		if (res.code == 0) {
+			deptOptions.value = res.data || []
+		} else {
+			useMessage().error(res.msg || "获取部门数据失败")
 		}
-		const { data } = await deptApi.deptTree(_pa)
-		state.options = data ?? []
-	} finally {
-		setTimeout(() => (state.loading = false), 500)
+	} catch (error: any) {
+		useMessage().error(error.msg || "获取部门数据失败")
 	}
 }
 
-function remoteSearch(params: string) {
-	if (params != queryForm.name) {
-		queryForm.name = params
-		getOptions()
-	}
+// 选择变更
+const handleChange = (val: string | number) => {
+	emit("change", val)
 }
 
-function filterTreeData(treeData: Array<any>) {
-	return treeData.filter((item) => {
-		if (item.children && item.children.length) {
-			item.disabled = true
-			item.children = filterTreeData(item.children)
-		}
-		return item
-	})
-}
-
-function clear() {
-	state.selectId = null
-	getOptions()
-}
+onMounted(() => {
+	loadDeptTree()
+})
 </script>