uniapp列表点击多选和单选
<view class="title">物品类别</view><view class="box dis-flex justify-between flex-wrap"><view class="lias" :class="item.selected ? 'active' : ''" v-for="(item,index) in goodsCateogory
一、多选
<view class="title">物品类别</view>
<view class="box dis-flex justify-between flex-wrap">
<view class="lias" :class="item.selected ? 'active' : ''" v-for="(item,index) in goodsCateogory" :key="index" @click="goodsClick(item,index)">
{{item.title}}
</view>
</view>
goodsCateogory:[ //物品类别列表
{id:1,title:'消耗品'},
{id:2,title:'赠品'},
{id:3,title:'宣传'},
],
selectId:[],goodsClick(item,index){
if(item.selected == true){
this.$delete(item,'selected')
//取消选中时删除数组中的值
for(var i = 0; i < this.selectId.length; i++){
if(this.selectId[i] === item.id){
this.selectId.splice(i,1);
}
}
console.log("选中的值1",this.selectId)
}else{
this.$set(item,'selected',true)
this.selectId.push(item.id)
console.log("选中的值2",this.selectId)
}
var listIds = this.selectId.join(",")
console.log("提交的数据",listIds)
},
二、单选
<view class="lias" :class="cateogoryActive==index ? 'active' : ''" v-for="(item,index) in goodsCateogory" :key="index" @click="goodsCateogoryClick(item,index)">
{{item.title}}
</view>
goodsCateogory:[ //物品类别列表
{id:11,title:'汽车消耗品'},
{id:12,title:'推广赠品'},
{id:13,title:'推广宣传'},
],
cateogoryActive:-1,
goodsCateogoryClick(item,index){
//单选
if(this.cateogoryActive == index) {
this.cateogoryActive = -1
} else {
this.cateogoryActive = index
console.log(item)
}
},
更多推荐
所有评论(0)