您的位置:首页 > 房产 > 建筑 > vant 动态查询下拉菜单(可用)

vant 动态查询下拉菜单(可用)

2024/12/23 20:28:44 来源:https://blog.csdn.net/m0_50337423/article/details/141826060  浏览:    关键词: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;}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com