当后台返回的数据源格式不是如下value,text字段时，需要自定义字段配置

<code>range: [

{ value: 0, text: "篮球" },

{ value: 1, text: "足球" },

{ value: 2, text: "游泳" },

],

思路有两个，

思路一：前端遍历更改为value，text

let option = []

const selectlist = ref([])

data.forEach(item => {

option.push({

value: item.id,

text: item.productName

})

})

selectlist.value = option

思路二：更改uni-ui源码，增加可配置项，核心思想在原有源码的基础上增加可配置项，为节约时间有参照网友：uni-data-select 插件配置接收字段-CSDN博客，在此基础上修复了原本的在移动端选择后定位上浮问题

arrayConfig:{

type: Object,

default () {

return {}

}

},

<code>

<template>

<view class="uni-stat__select">code>

<span v-if="label" class="uni-label-text hide-on-phone">{ {label + '：'}}</span>code>

<view class="uni-stat-box" :class="{'uni-stat__actived': current}">code>

<view class="uni-select" :class="{'uni-select--disabled':disabled}">code>

<view class="uni-select__input-box" @click="toggleSelector">code>

<view v-if="current" class="uni-select__input-text">{ {current}}</view>code>

<view v-else class="uni-select__input-text uni-select__input-placeholder">{ {typePlaceholder}}</view>code>

<view v-if="current && clear && !disabled" @click.stop="clearVal" >code>

<uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons>code>

</view>

<view v-else>

<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" ></uni-icons>code>

</view>

</view>

<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />code>

<view class="uni-select__selector" v-if="showSelector">code>

<view class="uni-popper__arrow"></view>code>

<scroll-view scroll-y="true" class="uni-select__selector-scroll">code>

<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">code>

<text>{ {emptyTips}}</text>

</view>

<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"code>

@click="change(item)">code>

<text :class="{'uni-select__selector__disabled': item.disable}">{ {formatItemName(item)}}</text>code>

</view>

</scroll-view>

</view>

</view>

</view>

</view>

</template>

<script>

/**

* DataChecklist 数据选择器

* @description 通过数据渲染的下拉框组件

* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select

* @property {String} value 默认值

* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]

* @property {Boolean} clear 是否可以清空已选项

* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效

* @property {String} label 左侧标题

* @property {String} placeholder 输入框的提示文字

* @property {Boolean} disabled 是否禁用

* @event {Function} change 选中发生变化触发

*/

export default {

name: "uni-data-select",

mixins: [uniCloud.mixinDatacom || {}],

props: {

localdata: {

type: Array,

default () {

return []

}

},

arrayConfig:{

type: Object,

default () {

return {}

}

},

value: {

type: [String, Number],

default: ''

},

modelValue: {

type: [String, Number],

default: ''

},

label: {

type: String,

default: ''

},

placeholder: {

type: String,

default: '请选择'

},

emptyTips: {

type: String,

default: '无选项'

},

clear: {

type: Boolean,

default: true

},

defItem: {

type: Number,

default: 0

},

disabled: {

type: Boolean,

default: false

},

// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"code>

format: {

type: String,

default: ''

},

},

data() {

return {

showSelector: false,

current: '',

mixinDatacomResData: [],

apps: [],

channels: [],

cacheKey: "uni-data-select-lastSelectedValue",

};

},

created() {

this.debounceGet = this.debounce(() => {

this.query();

}, 300);

if (this.collection && !this.localdata.length) {

this.debounceGet();

}

},

computed: {

typePlaceholder() {

const text = {

'opendb-stat-app-versions': '版本',

'opendb-app-channels': '渠道',

'opendb-app-list': '应用'

}

const common = this.placeholder

const placeholder = text[this.collection]

return placeholder ?

common + placeholder :

common

},

valueCom(){

// #ifdef VUE3

return this.modelValue;

// #endif

// #ifndef VUE3

return this.value;

// #endif

}

},

watch: {

localdata: {

immediate: true,

handler(val, old) {

if (Array.isArray(val) && old !== val) {

this.mixinDatacomResData = val

}

}

},

valueCom(val, old) {

this.initDefVal()

},

mixinDatacomResData: {

immediate: true,

handler(val) {

if (val.length) {

this.initDefVal()

}

}

}

},

methods: {

debounce(fn, time = 100){

let timer = null

return function(...args) {

if (timer) clearTimeout(timer)

timer = setTimeout(() => {

fn.apply(this, args)

}, time)

}

},

// 执行数据库查询

query(){

this.mixinDatacomEasyGet();

},

// 监听查询条件变更事件

onMixinDatacomPropsChange(){

if (this.collection) {

this.debounceGet();

}

},

initDefVal() {

let defValue = ''

if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {

defValue = this.valueCom

} else {

let strogeValue

if (this.collection) {

strogeValue = this.getCache()

}

if (strogeValue || strogeValue === 0) {

defValue = strogeValue

} else {

let defItem = ''

if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {

if(this.arrayConfig.hasOwnProperty("valueKey")){

let ids = this.arrayConfig.valueKey

defItem = this.mixinDatacomResData[this.defItem - 1][ids]

}else{

defItem = this.mixinDatacomResData[this.defItem - 1].value

}

}

defValue = defItem

}

if (defValue || defValue === 0) {

this.emit(defValue)

}

}

let def = null

if(this.arrayConfig.hasOwnProperty("valueKey")){

let ids = this.arrayConfig.valueKey

def = this.mixinDatacomResData.find(item => item[ids] === defValue)

}else{

def = this.mixinDatacomResData.find(item => item.value === defValue)

}

this.current = def ? this.formatItemName(def) : ''

},

/**

* @param {[String, Number]} value

* 判断用户给的 value 是否同时为禁用状态

*/

isDisabled(value) {

let isDisabled = false;

this.mixinDatacomResData.forEach(item => {

if(this.arrayConfig.hasOwnProperty("valueKey")){

let ids = this.arrayConfig.valueKey

if (item[ids] === value) {

isDisabled = item.disable

}

}else{

if (item.value === value) {

isDisabled = item.disable

}

}

})

return isDisabled;

},

clearVal() {

this.emit('')

if (this.collection) {

this.removeCache()

}

},

change(item) {

if (!item.disable) {

this.showSelector = false

this.current = this.formatItemName(item)

let emitValue = null;

if(this.arrayConfig.hasOwnProperty("valueKey")){

let ids = this.arrayConfig.valueKey

emitValue = item[ids]

}else{

emitValue = item.value

}

this.emit(emitValue)

}

},

emit(val) {

this.$emit('input', val)

this.$emit('update:modelValue', val)

this.$emit('change', val)

if (this.collection) {

this.setCache(val);

}

},

toggleSelector() {

if (this.disabled) {

return

}

this.showSelector = !this.showSelector

},

formatItemName(item) {

if(this.arrayConfig.hasOwnProperty("valueKey")){

let ids = this.arrayConfig.valueKey

let labels = this.arrayConfig.labelKey

let data = {};

data[labels] = item[labels]

data[ids] = item[ids]

let channel_code = item.channel_code;

channel_code = channel_code ? `(${channel_code})` : ''

if (this.format) {

// 格式化输出

let str = "";

str = this.format;

for (let key in item) {

str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);

}

return str;

} else {

return this.collection.indexOf('app-list') > 0 ?

`${data[labels]}(${data[ids]})` :

(

data[labels] ?

data[labels] :

`未命名${channel_code}`

)

}

}else{

let {

text,

value,

channel_code

} = item

channel_code = channel_code ? `(${channel_code})` : ''

if (this.format) {

// 格式化输出

let str = "";

str = this.format;

for (let key in item) {

str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);

}

return str;

} else {

return this.collection.indexOf('app-list') > 0 ?

`${text}(${value})` :

(

text ?

text :

`未命名${channel_code}`

)

}

}

},

// 获取当前加载的数据

getLoadData(){

return this.mixinDatacomResData;

},

// 获取当前缓存key

getCurrentCacheKey(){

return this.collection;

},

// 获取缓存

getCache(name=this.getCurrentCacheKey()){

let cacheData = uni.getStorageSync(this.cacheKey) || {};

return cacheData[name];

},

// 设置缓存

setCache(value, name=this.getCurrentCacheKey()){

let cacheData = uni.getStorageSync(this.cacheKey) || {};

cacheData[name] = value;

uni.setStorageSync(this.cacheKey, cacheData);

},

// 删除缓存

removeCache(name=this.getCurrentCacheKey()){

let cacheData = uni.getStorageSync(this.cacheKey) || {};

delete cacheData[name];

uni.setStorageSync(this.cacheKey, cacheData);

},

}

}

</script>

<style lang="scss">code>

$uni-base-color: #6a6a6a !default;

$uni-main-color: #333 !default;

$uni-secondary-color: #909399 !default;

$uni-border-3: #e5e5e5;

/* #ifndef APP-NVUE */

@media screen and (max-width: 500px) {

.hide-on-phone {

display: none;

}

}

/* #endif */

.uni-stat__select {

display: flex;

align-items: center;

// padding: 15px;

cursor: pointer;

width: 100%;

flex: 1;

box-sizing: border-box;

}

.uni-stat-box {

width: 100%;

flex: 1;

}

.uni-stat__actived {

width: 100%;

flex: 1;

// outline: 1px solid #2979ff;

}

.uni-label-text {

font-size: 14px;

font-weight: bold;

color: $uni-base-color;

margin: auto 0;

margin-right: 5px;

}

.uni-select {

font-size: 14px;

border: 1px solid $uni-border-3;

box-sizing: border-box;

border-radius: 4px;

padding: 0 5px;

padding-left: 10px;

position: relative;

/* #ifndef APP-NVUE */

display: flex;

user-select: none;

/* #endif */

flex-direction: row;

align-items: center;

border-bottom: solid 1px $uni-border-3;

width: 100%;

flex: 1;

height: 35px;

&--disabled {

background-color: #f5f7fa;

cursor: not-allowed;

}

}

.uni-select__label {

font-size: 16px;

// line-height: 22px;

height: 35px;

padding-right: 10px;

color: $uni-secondary-color;

}

.uni-select__input-box {

height: 35px;

position: relative;

/* #ifndef APP-NVUE */

display: flex;

/* #endif */

flex: 1;

flex-direction: row;

align-items: center;

}

.uni-select__input {

flex: 1;

font-size: 14px;

height: 22px;

line-height: 22px;

}

.uni-select__input-plac {

font-size: 14px;

color: $uni-secondary-color;

}

.uni-select__selector {

/* #ifndef APP-NVUE */

box-sizing: border-box;

/* #endif */

position: absolute;

top: calc(100% + 12px);

left: 0;

width: 100%;

background-color: #FFFFFF;

border: 1px solid #EBEEF5;

border-radius: 6px;

box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

z-index: 3;

padding: 4px 0;

}

.uni-select__selector-scroll {

/* #ifndef APP-NVUE */

max-height: 200px;

box-sizing: border-box;

/* #endif */

}

.uni-select__selector-empty,

.uni-select__selector-item {

/* #ifndef APP-NVUE */

display: flex;

cursor: pointer;

/* #endif */

line-height: 35px;

font-size: 14px;

text-align: center;

/* border-bottom: solid 1px $uni-border-3; */

padding: 0px 10px;

}

.uni-select__selector-item:hover {

background-color: #f9f9f9;

}

.uni-select__selector-empty:last-child,

.uni-select__selector-item:last-child {

/* #ifndef APP-NVUE */

border-bottom: none;

/* #endif */

}

.uni-select__selector__disabled {

opacity: 0.4;

cursor: default;

}

/* picker 弹出层通用的指示小三角 */

.uni-popper__arrow,

.uni-popper__arrow::after {

position: absolute;

display: block;

width: 0;

height: 0;

border-color: transparent;

border-style: solid;

border-width: 6px;

}

.uni-popper__arrow {

filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));

top: -6px;

left: 10%;

margin-right: 3px;

border-top-width: 0;

border-bottom-color: #EBEEF5;

}

.uni-popper__arrow::after {

content: " ";

top: 1px;

margin-left: -6px;

border-top-width: 0;

border-bottom-color: #fff;

}

.uni-select__input-text {

// width: 280px;

width: 100%;

color: $uni-main-color;

white-space: nowrap;

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

overflow: hidden;

}

.uni-select__input-placeholder {

color: $uni-base-color;

font-size: 12px;

}

.uni-select--mask {

position: fixed;

top: 0;

bottom: 0;

right: 0;

left: 0;

}

</style>

使用：

<uni-data-select v-model="selectHouse" :arrayConfig="configParams" code>

:localdata="housList" @change="change"></uni-data-select>code>

const configParams = {

labelKey: "houseFullName",

valueKey: "houseId",

}