uni-data-select 插件配置接收字段，更改默认的text,value

惊雷无声 · 2024-12-31 21:20:20

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

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 {}
}
},

复制代码

<template> <view class="uni-stat__select"> <span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span> <view class="uni-stat-box" :class="{'uni-stat__actived': current}"> <view class="uni-select" :class="{'uni-select--disabled':disabled}"> <view class="uni-select__input-box" @click="toggleSelector"> <view v-if="current" class="uni-select__input-text">{{current}}</view> <view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> <view v-if="current && clear && !disabled" @click.stop="clearVal" > <uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons> </view> <view v-else> <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" ></uni-icons> </view> </view> <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> <view class="uni-select__selector" v-if="showSelector"> <view class="uni-popper__arrow"></view> <scroll-view scroll-y="true" class="uni-select__selector-scroll"> <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> <text>{{emptyTips}}</text> </view> <view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" @click="change(item)"> <text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> </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}" 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"> $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"
:localdata="housList" @change="change"></uni-data-select>
const configParams = {
labelKey: "houseFullName",
valueKey: "houseId",
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

uni-data-select 插件配置接收字段，更改默认的text,value

0 个回复

快速回复

楼主热帖

标签云