select
文章來源：http://www.zghlxwxcb.cn/news/detail-822012.html
<view>
<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
<u-button @click="show = true">打開</u-button>
</view>
<script>
onMounted(() => {
// TODO 完善流程
loadCompanyInfo()
}
// 彈出控件
const show = ref(false);
// 這種情況需要指定range-key為cateName，否則組件不知道該顯示對象的哪個(gè)屬性
const list = ref([]);
// const selected = ref()
// 選中后的方法回調(diào) TODO： 自定義邏輯處理
const confirm = (selected:any) => {
console.log("點(diǎn)擊確切換之后的值",selected[0]);
}
const loadCompanyInfo = async () =>{
const customerId = user.value.id
try {
const response :any = [{businessTaxNumber: "123456789032323", clientId: 2023045, ctype: 1, id: 55,name: "測試員"}];
// list.value = result
console.log("Companys-Result:",response)
// 將請求后的值賦值給list
list.value = response.map((item: { id: any; name: any; }) => ({
// value ,label
value: item.id,
label: item.name
}));
}catch (err:any) {
console.log(err);
if(err.errCode === 0){
Toast.show('請稍后重新嘗試！');
}
}
}
</script>
效果圖
文章來源地址http://www.zghlxwxcb.cn/news/detail-822012.html
到了這里，關(guān)于UVeiw 組件的使用（更多自定義案例和解決方案），Vue3 +ts 版本 #Selected組件 #Vue 3 # Ts的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
