uniapp中下拉选择自定义数据

木子哲~

已于 2022-09-24 14:59:55 修改

阅读量1.6k

点赞数 2

文章标签： uni-app

于 2022-09-24 14:47:43 首次发布

本文链接：https://blog.csdn.net/chengfulgy/article/details/127025106

版权

本文介绍如何在uni-app中自定义下拉选择框的数据，通过使用uni-combox组件，结合view部分的定制，实现灵活的数据展示和交互功能。

摘要由CSDN通过智能技术生成

生成示例：

view部分

<template>
    <uni-combox labelKey="name" valueKey="id" :candidates="candidates" 
        placeholder="请选择" v-model="form.hospitalId"></uni-combox>
</template>

<script>
    data() {
         return {
            candidates：[],
            form:{
                hospitalId:'',
            }
         }
    }
    methods: {
         baseUrl.doPost('/query/getList', {}).then(res => {
             this.candidates= res.data.result
         })
    }

</script>

uni-combox部分

<template>
	<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
		<view v-if="label" class="uni-combox__label" :style="labelStyle">
			<text>{
   {label}}</text>
		</view>
		<view class="uni-combox__input-box">
			<input class="uni-combox__input" type="text" :placeholder="placeholder"
				placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
				@blur="onBlur" />
			<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="t