ｅｌｅｍｅｎｔ中
需要对接口返回的数据进行分析。多选问题使用checkbox，单选题使用radio。
多选时可以绑定ｍｉｎ／ｍａｘ来控制选择的个数
<div class="" v-if="item2.allowMultipleVote == 1">
<div class="title_radio">
多选 [最少选择<span>{{ item2.leastSelectNumber }}</span
>项,最多选择<span>{{ item2.maxSelectNumber }}</span
>项]
</div>
<div class="choose_card">
<el-checkbox-group
v-model="selectedCheckboxItems"
:min="Number(item2.leastSelectNumber)"
:max="Number(item2.maxSelectNumber)"
>
<label v-for="(item3, index3) in item2.options" :key="index3">
<el-checkbox
:label="item3.id"
:value="item3.id"
@change="handleCheckboxChange(item2.itemId)"
>{{ item3.dataOption }}</el-checkbox
>
</label>
</el-checkbox-group>
</div>
</div>
<div class="" v-else>
<div class="title_radio">单选</div>
<div class="choose_card">
<el-radio-group v-model="selectedRadioItems">
<label v-for="(item3, index3) in item2.options" :key="index3">
<el-radio
:label="item3.id"
:value="item3.id"
@change="handleRadioChange(item2.itemId)"
>
{{ item3.dataOption }}
</el-radio>
</label>
</el-radio-group>
</div>
</div>怎么收集选中的数据集合
因为是设计多选、单选、多个问题。所以要使用多维数组传给后端。
分别给多选和单选绑定方法，收集选中的值。
ｉｔｅｍ是选中题目的ｉｄ，itemOptionIds是题目的选项ｉｄ，多选时itemOptionIds要穿数组。所以多选题v-model绑定的值是数组。
// 单选按钮的操作
handleRadioChange(value) {
let newObj = {
itemId: value,
itemOptionIds: this.selectedRadioItems,
};
// 判断是否已经选择过当前选项
let index = this.sumitInfoid.findIndex((item) => item.itemId === newObj.itemId);
if (index !== -1) {
this.sumitInfoid[index] = newObj;
} else {
this.sumitInfoid.push(newObj);
}
// console.log('单选按钮', this.sumitInfoid);
},
// 多选按钮的操作
handleCheckboxChange(value) {
console.log(value, this.selectedCheckboxItems, 'this.selectedCheckboxItems');
let newObj = {
itemId: value,
itemOptionIds: this.selectedCheckboxItems,
};
let index = this.sumitInfoid.findIndex((item) => item.itemId === newObj.itemId);
if (index !== -1) {
this.sumitInfoid[index] = newObj;
} else {
this.sumitInfoid.push(newObj);
}
console.log('多选按钮', this.sumitInfoid);
},ｄａｔａ定义的值
sumitInfoid: [], // 最终要提交的选项数据
selectedRadioItems: '', // 单选的选项数据
selectedCheckboxItems: [], // 多选的选项数据ｕｎｉ中
ｕｎｉ中好像监听不到多选的最大值最小值，需要自己判断。其他地方同element
<view class="" v-if="item2.allowMultipleVote == 1">
<view class="title_radio">
多选 [最少选择<text>{{item2.leastSelectNumber}}</text>项,最多选择<text>{{item2.maxSelectNumber}}</text>项]
</view>
<view class="choose_card">
<checkbox-group @change="checkboxChange">
<label v-for="(item3,index3) in item2.options" :key="index3">
<checkbox :value="item2.itemId+'+'+item3.id" :checked="item3.isChecked != 0"
style="transform:scale(0.8)" color="#00B893;" /><text>{{item3.dataOption}}</text>
</label>
</checkbox-group>
</view>
</view>
<view class="" v-else>
<view class="title_radio">
单选
</view>
<view class="choose_card">
<radio-group @change="radioChange">
<label v-for="(item3,index3) in item2.options" :key="index3">
<!-- 单选按钮 -->
<radio class="radio_true" :value="item2.itemId+'+'+item3.id" :name="item3.dataOption"
:checked="index3 === current" color="#00B893" style="transform: scale(0.8);" />
<text>{{item3.dataOption}}</text>
</label>
</radio-group>
</view>
</view> // 投票选项更改
radioChange: function(evt) {
console.log(evt.detail.value);
let value = evt.detail.value.split('+');
let newObj = {
itemId: value[0],
itemOptionIds: [value[1]] // 注意这里将itemOptionIds包装在数组中
};
// 判断是否已经选择过当前选项
let index = this.sumitInfoid.findIndex(item => item.itemId === newObj.itemId);
console.log('index !== -1', index !== -1); // 输出结果
if (index !== -1) {
this.sumitInfoid[index] = newObj;
} else {
this.sumitInfoid.push(newObj);
}
// console.log('输出结果单选sumitInfoid', this.sumitInfoid); // 输出结果
},
// 投票选项更改
checkboxChange: function(e) {
let newObj = {
itemId: '',
itemOptionIds: [] // 注意这里将itemOptionIds包装在数组中
};
if (e.detail.value.length > 0) {
let firstValue = e.detail.value[0];
let parts = firstValue.split('+');
newObj.itemId = parts[0]; // 获取id部分
// 遍历所有值并提取value部分
e.detail.value.forEach(value => {
let parts = value.split('+');
if (parts.length > 1) { // 确保有id和value两部分
// 判断是否多选了
let foundItem = this.voteItemList.find(item => item.itemId === newObj.itemId)
let maxSelectNumber = foundItem.maxSelectNumber;
if (newObj.itemOptionIds.length >= maxSelectNumber) {
uni.showToast({
title: '最多只能选择' + maxSelectNumber + '项',
icon: 'none'
})
for (var i = 0, lenI = foundItem.options.length; i < lenI; ++i) {
const item = foundItem.options[i];
if (item.id == parts[1]) {
this.$set(item, 'isChecked', 1)
setTimeout(() => {
this.$set(item, 'isChecked', 0)
}, 500)
}
}
} else {
newObj.itemOptionIds.push(parts[1]); // 将value部分添加到values数组中
}
}
});
}
// 判断是否已经选择过当前选项
let index = this.sumitInfoid.findIndex(item => item.itemId === newObj.itemId);
if (index !== -1) {
this.sumitInfoid[index] = newObj;
} else {
this.sumitInfoid.push(newObj);
}
// }
// }
// console.log('输出结果多选sumitInfoid', this.sumitInfoid); // 输出结果
},页面展示
