vant 动态查询下拉菜单（可用）

动态查询item项

在这里插入图片描述

<van-form @submit="onSubmit" ref="formRef"><Title title="企业信息" title-line title-size="19" class="ml-[18px] mb-[18px]"></Title><van-cell-group inset class="py-[18px]"><div><field-title title="所属企业" class="ml-4"></field-title><van-fieldv-model="model.companyName"is-linkreadonlyname="所属企业"placeholder="请选择所属企业"@click="showPicker = true":rules="[{ required: true, message: '必填项' }]"@input="getCompanyList(model.companyName)"/><van-popup v-model:show="showPicker" position="bottom" :close-on-click-overlay="false"><div class="w-full text-center mt-4">选择企业</div><van-searchplaceholder="输入企业名称"v-model="model.companyName"@search="onSearch"@update:model-value="getCompanyList"></van-search><van-picker:columns="options"@confirm="onConfirm"@cancel="handCancelPickerCompanyInfo"></van-picker></van-popup></div></van-cell-group><div style="margin: 16px;"><van-button  block type="primary" native-type="submit" :loading="loading" :disabled="loading">注册</van-button></div></van-form>

  const model = ref({companyName: undefined,companyCode: undefined,})const showPicker = ref(false);const onConfirm = ({selectedOptions}) => {model.value.companyName = selectedOptions[0]?.textmodel.value.companyCode = selectedOptions[0]?.value;showPicker.value = false;};function onSearch(value) {getCompanyList(value)}const options = ref<any>([])const loading = ref(false)const loadingSearch = ref(false)function getCompanyList(value: string) {if (!value.length) {options.value = []return}loadingSearch.value = truegetEnterpriseOptionApi(value).then((res) => {options.value = res.rows.map(item => ({text: item.label, value: item.value}))loadingSearch.value = false}).catch((err) => {loadingSearch.value = false})}function handCancelPickerCompanyInfo() {showPicker.value = falseoptions.value = []model.value.companyName = undefined;model.value.companyCode = undefined;}