UVeiw 组件的使用（更多自定义案例和解决方案），Vue3 +ts 版本 #Selected组件 #Vue 3 # Ts-Toy模板网

这篇具有很好参考价值的文章主要介绍了UVeiw 组件的使用（更多自定义案例和解决方案），Vue3 +ts 版本 #Selected组件 #Vue 3 # Ts。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

select

UVeiw 组件的使用（更多自定义案例和解决方案），Vue3 +ts 版本 #Selected组件 #Vue 3 # Ts,Vue,vue.js,javascript,前端

<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，否则组件不知道该显示对象的哪个属性
const list = ref([]);
// const selected = ref()
// 选中后的方法回调 TODO： 自定义逻辑处理
const confirm = (selected:any) => {

  console.log("点击确切换之后的值",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>