<view class="order_body_text_right" v-else-if="datasa.ztai=='selete'" @click="showselete(index)"> <view style="color: #ccc;margin-right: 8rpx;height: 100%;text-align: center; line-height: 50rpx;" v-if="seleteUp==''">请选择</view> <view style="color: #ccc;margin-right: 8rpx;height: 100%;text-align: center; line-height: 50rpx;" v-else v-for="(seleteUps,index) in seleteUp" :key="index">{{seleteUps}}</view> <view style="color: #ccc;"> > </view> </view> <u-select v-model="show" :list="list" mode="single-column" @confirm="confirm" :safe-area-inset-bottom='true'></u-select> seleteUp:[],//下拉选择的值 // 点击了请选择行 001 showselete(index) { console.log('点击选择了第',index,'个'); console.log('请选择'); this.show = !this.show }, // 注意返回值为一个数组,单列时取数组的第一个元素即可(只有一个元素) 对应↑ 001 confirm(e) { this.seleteUp.push(e[0].label) // this.seleteUp=e[0].label console.log(this.seleteUp,'选择的值'); },当我点击下拉时,弹出下拉框,选择对应的数据,但是如果同时有很多下拉框,这个下拉框是根据后台返给我的数量,我需要在点击某个下拉框时,选中数据后将数据显示到页面中,互相之间没有影响
时间: 2024-03-05 18:49:50 浏览: 66
mcu_uds-master使用说明1
根据您提供的代码,我理解您的需求是:当页面中同时存在多个下拉框组件时,需要保证它们之间的选择互不干扰,即选择一个下拉框中的选项不会影响其他下拉框的选项。如果我的理解有误,请您指出。
针对这个需求,可以为每个下拉框组件单独设置一个选中值的变量,例如可以为每个下拉框组件绑定一个 `selectedValue` 变量。当用户选择某个下拉框中的选项时,只会更新对应的 `selectedValue` 变量,而不会影响其他下拉框的选项。同时,当需要将当前选中的选项显示到页面中时,只需要在对应的下拉框组件中渲染 `selectedValue` 变量即可。
以下是一种可能的实现方式:
1. 在数据模型中添加 `selectedValue` 变量,用于保存每个下拉框组件的选中值:
```
data() {
return {
datasa: {
// ...
selectedValues: [], // 保存每个下拉框组件的选中值
},
// ...
}
}
```
2. 在下拉框组件模板中绑定 `selectedValue` 变量,并且在选中选项时更新该变量:
```
<view class="order_body_text_right" v-else-if="datasa.ztai === 'selete'" @click="showselete(index)">
<view style="color: #ccc;margin-right: 8rpx;height: 100%;text-align: center; line-height: 50rpx;" v-if="!selectedValue">请选择</view>
<view style="color: #ccc;margin-right: 8rpx;height: 100%;text-align: center; line-height: 50rpx;" v-else>{{ selectedValue }}</view>
<view style="color: #ccc;"> > </view>
</view>
<u-select v-model="show" :list="list" mode="single-column" @confirm="confirm" :safe-area-inset-bottom="true"></u-select>
// 点击了请选择行
showselete(index) {
console.log('点击选择了第', index, '个');
this.show = !this.show;
},
// 点击了下拉选项
confirm(e) {
this.selectedValue = e[0].label; // 更新选中值
console.log('选择的值:', this.selectedValue);
// 将选中值保存到 selectedValues 数组中
this.datasa.selectedValues.splice(index, 1, this.selectedValue);
},
```
3. 在页面中渲染每个下拉框组件时,分别绑定对应的 `selectedValue` 变量:
```
<view v-for="(item, index) in datasa.seleteList" :key="index">
<view class="order_body_text_left">{{ item.title }}</view>
<view class="order_body_text_right" v-else-if="datasa.ztai === 'selete'" @click="showselete(index)">
<!-- 绑定对应的 selectedValue 变量 -->
<view style="color: #ccc;margin-right: 8rpx;height: 100%;text-align: center; line-height: 50rpx;" v-if="!datasa.selectedValues[index]">请选择</view>
<view style="color: #ccc;margin-right: 8rpx;height: 100%;text-align: center; line-height: 50rpx;" v-else>{{ datasa.selectedValues[index] }}</view>
<view style="color: #ccc;"> > </view>
</view>
<u-select v-model="show" :list="item.list" mode="single-column" @confirm="confirm" :safe-area-inset-bottom="true"></u-select>
</view>
```
这样,每个下拉框组件都会有一个独立的 `selectedValue` 变量,它们之间不会互相干扰,而且在页面中渲染选中值时也不会有冲突。
阅读全文