一般来说渲染后台返回的数据是不会带有判断是否选中的属性
所以第一步可以在获取接口数据的同时给每一个对象添加一个可判断是否选的字段select,这里我定义select为false时是选中
res.rows.forEach((item) => {
//动态向list中每个对象添加select属性 true则是未选中图片显示
this.$set(item, "select", true);
});
然后给每一个单选框添加click事件 同时传入当前的index
<div class="info-top">
<img
src="@/assets/orderManage/icon_duoxuan@2x.png"
alt=""
class="select-icon"
@click.stop="select(index)"
v-if="item.select"
/>
<img
src="@/assets/orderManage/icon_selectin@2x.png"
alt=""
class="select-icon"
@click.stop="select(index)"
v-else
/>
</div>
下面就是select 函数
select(index) {
if (this.list[index].select) {
//每次点击选中框先将所有按钮置空
this.list.forEach((item) => {
item.select = true;
});
this.list[index].select = false;
}else if(!this.list[index].select) {
this.list[index].select = true
}
},
整体思路就是,点击按钮时,先判断当前按钮状态(false为选中,true是为选中)接着如果是未选中状态,先将所有按钮的状态都设置为为选中,再将当前按钮状态设置为选中(select设置为false),如果当前按钮时选中状态,就将当前的按钮设置为为选中(select为true)