uniapp uview 页面多个select组件回显处理,默认选中

发布时间:2023年12月20日

?

?

<view class="add-item column space-around" @click="selectClick(1)">
				<text class="w-s-color-3 f-28">商品分类</text>
				<view class="w-100 space-between">
					<!-- 第一个参数为你的单选数组,第二个参数为所需要id -->
					<input type="text" :value="echoInputFun(categoryList,query.category_id)" placeholder="请选择" disabled
						placeholder-class="phColor" class="one" />
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>
			<view class="add-item column space-around" @click="selectClick(2)">
				<text class="w-s-color-3 f-28">商品等级</text>
				<view class="w-100 space-between">
					<!-- 第一个参数为你的单选数组,第二个参数为所需要id -->
					<input type="text" :value="echoInputFun(typeList,query.type)" placeholder="请选择" disabled
						placeholder-class="phColor" class="one" />
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>

选择框?

<u-select v-model="selectShow" :default-value="defaultValue" :list="list"
			@confirm="confirmSelectClick"></u-select>

?select所需要的数据

selectShow: false,
list: [],
typeList: [{
				value: 1,
				label: "一级"
			},
			{
				value: 2,
				label: "二级"
			},
			{
				value: 3,
				label: "三级"
			}
		],
categoryList: [],
//记录第几个点开的select框
selectIndex: 1,
//选中的下标
defaultValue: [],
      selectClick(index) {
				this.selectIndex = index

				if (index == 1) {
					this.list = this.categoryList
					this.echoFun(this.query.category_id)
				} else {
					this.list = this.typeList
					this.echoFun(this.query.type)
				}
				this.selectShow = true
			},
			confirmSelectClick(e) {
				if (this.selectIndex == 1) {
					this.query.category_id = e[0].value
				} else {
					this.query.type = e[0].value
				}
			},
			// 回显到input上面
			echoInputFun(list, value) {
				if (!value) return
				let text
				list.map(item => {
					if (item.value == value) {
						text = item.label
					}
				})
				return text
			},
			// 回显到select表上面
			echoFun(value) {
				this.list.map((item, index) => {
					if (item.value == value) {
						this.defaultValue = [index]
					}
				})
			},

文章来源:https://blog.csdn.net/weixin_47517731/article/details/135103827
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。