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

 

 

<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]
					}
				})
			},

最近更新

  1. TCP协议是安全的吗?

    2023-12-22 21:12:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-22 21:12:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-22 21:12:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-22 21:12:03       18 阅读

热门阅读

  1. 文件上传存储工具

    2023-12-22 21:12:03       46 阅读
  2. 多数元素

    2023-12-22 21:12:03       34 阅读
  3. 微服务降级策略及其在Spring Boot中的实现

    2023-12-22 21:12:03       50 阅读
  4. Unity Editor 代码编辑AnimationClip

    2023-12-22 21:12:03       40 阅读
  5. 187. LCR 破冰游戏

    2023-12-22 21:12:03       44 阅读