feat:默认选中

src/components/Select/SelectMch.vue

@@ -35,11 +35,13 @@ const props = withDefaults(
 	defineProps<{
 		placeholder?: string
 		apiParams?: any
+		autoFirst?: boolean
 		disabled?: boolean
 	}>(),
 	{
 		placeholder: "请选择",
 		apiParams: {},
+		autoFirst: false,
 		disabled: false,
 	},
 )
@@ -75,6 +77,9 @@ async function getOptions() {
 		}
 		const { data } = await mchApi.select(_pa)
 		state.options = data.records ?? []
+		if (props.autoFirst && state.options.length != 0) {
+			state.selectId = state.options[0].id
+		}
 	} finally {
 		setTimeout(() => (state.loading = false), 500)
 	}
@@ -91,4 +96,8 @@ function clear() {
 	state.selectId = null
 	getOptions()
 }
+
+onMounted(() => {
+	props.autoFirst && getOptions()
+})
 </script>

src/components/Select/SelectWalletType.vue

@@ -3,7 +3,7 @@
 		style="width: 100%"
 		v-model="state.selectId"
 		:placeholder="props.placeholder"
-		clearable
+		:clearable="props.clearable"
 		remote-show-suffix
 		filterable
 		remote
@@ -11,6 +11,7 @@
 		:remote-method="remoteSearch"
 		:loading="state.loading"
 		@visible-change="(e: boolean) => e && getOptions()"
+		@change="change"
 	>
 		<el-option v-for="v in state.options" :key="v.id" :label="`${v.name}`" :value="v.id">
 			<div class="flex items-center">
@@ -30,16 +31,24 @@ import { reactive } from "vue"
 import { useDict } from "/@/hooks/dict"
 import { getWalletTypeSimple } from "/@/api/wallet/wallet-type"
 
+const emit = defineEmits(["change"])
+
 const selectId = defineModel()
 
 const props = withDefaults(
 	defineProps<{
 		placeholder?: string
 		disabled?: boolean
+		clearable?: boolean
+		autoFirst?: boolean
+		apiParams?: any
 	}>(),
 	{
 		placeholder: "请选择",
 		disabled: false,
+		clearable: true,
+		autoFirst: false,
+		apiParams: {},
 	},
 )
 
@@ -59,6 +68,8 @@ const state = reactive<any>({
 watch(
 	selectId,
 	(newVal, oldValue) => {
+		console.log(newVal, "newVal")
+
 		if (newVal == oldValue) return
 		state.selectId = newVal
 		getOptions()
@@ -71,10 +82,14 @@ async function getOptions() {
 		state.loading = true
 		const _pa = {
 			...queryForm,
+			...props.apiParams,
 		}
 		const { data } = await getWalletTypeSimple(_pa)
 		state.options = data.records ?? []
-
+		if (props.autoFirst && state.options.length != 0) {
+			state.selectId = state.options[0].id
+			emit("change", state.selectId)
+		}
 		const { wallet_type } = useDict("wallet_type")
 		state.walletType = wallet_type
 	} finally {
@@ -93,4 +108,12 @@ function clear() {
 	state.selectId = null
 	getOptions()
 }
+
+function change() {
+	emit("change", selectId)
+}
+
+onMounted(() => {
+	props.autoFirst && getOptions()
+})
 </script>