**HTML**
<div :class="[fullwidth,'party-list']" v-for="(item,index) in partyLists" :key="index+Math.random()">
<!--单选-->
<div @click="checkSingle(item,item.newsId)" :checked="nIds.indexOf(item.newsId)>=0"
:class="[{checked:item.makeChoose},'party-circle']" v-if="showScircle"></div>
<div class="party-cont" @click="toPdetail(item.newsId)" >
<span class="party-title">{{item.news.newsTitle}}</span>
<span class="party-article">{{item.news.newsContent}}</span>
</div>
</div>
<!--全选-->
<div :class="[fullwidth,poabs,'mselect-bottom']" v-if="showBottom">
<div class="check-all">
<div @click="checkAll()" :class="[{checked:checkAllItem},'check-all-circle']"></div>
<span>全选</span>
</div>
<button class="select-btn" @click="deleteProduct()">取消收藏</button>
</div>
**script**
``data
nIds:[]
**methods**
//选中单个
checkSingle (item,newsID){
if(this.checkSingle){
if (typeof item.makeChoose == 'undefined') {
Vue.set(item, 'makeChoose', true)
} else {
item.makeChoose = !item.makeChoose
}
}
let idIndex = this.nIds.indexOf(newsID)
if (idIndex >= 0) {//如果已经包含就去除
this.nIds.splice(idIndex, 1)
} else {//如果没有包含就添加
this.nIds.push(newsID)
}
// console.log(this.nIds)
},
//选中所有的
checkAll(){
this.checkAllItem = !this.checkAllItem;
var _this = this
if(this.checkAllItem){
this.partyLists.forEach(element => {
if(typeof element.makeChoose=='undefined'){
Vue.set(element, 'makeChoose',_this.checkAllItem) //让每一小项跟随checkall来变化
}else{
element.makeChoose=_this.checkAllItem
}
});
}else{
this.partyLists.forEach(element => {
if(typeof element.makeChoose=='undefined'){
Vue.set(element, 'makeChoose',_this.checkAllItem)
}else{
element.makeChoose=_this.checkAllItem
}
});
}
if (this.checkAllItem) {//全选时
this.nIds = []
this.partyLists.forEach(item => {
this.nIds.push(item.newsId)
})
} else {
this.nIds = []
}
console.log(this.nIds)
}
deleteProduct() {
console.log('打印参数'+this.nIds)
this.$api.post(
'/api/web/entity/collectDel',
{
"content":{
"newsIds":this.nIds,
}
},
success => {
console.log(success)
console.log('获取取消收藏列表')
this.getSelect()
},
error => {
console.lgo(error)
}
)
},
vue批量删除
最新推荐文章于 2024-05-27 15:58:16 发布