uniapp uview 页面多个select组件回显处理,默认选中
2023-12-20 12:38:08
?
?
<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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!