版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mhlghy/article/details/79498731
因近期项目有个批量删除的功能，我刚开始想的是用checkbox实现，这种方式也是可取的，但是它有局限性，那就是同一页面内可以实现，如果列表是子组件引用到父组件的（因为是批量删除，若用户选择多个，那就是一个数组，）需要v-model传一个数组到子组件，可能本人资历尚浅，在用v-model向父组件传值时遇到种种困难（如若有能解决此类问题的能人，看到此博客烦请指导一二），于是乎，换了另一种方式。
批量删除的功能，肯定是要通过id来实现删除功能，在项目中，拿到用户选中的列表id，将此id作为参数传入删除接口。
在我的项目中，
如上三张图分别为：图一、图二、图三、图四，需要说明的是，我的列表是子组件，收藏页面为父页面，相信此时你已经知道是怎么回事了，那就直接看代码吧
子组件代码
<template>
<div>
<ul>
<li v-for="(item,index) in newsList">
<transition name="fadeIn">
<div class="m_check" ref="newList" v-show="showCheck" @click="checkOne($event, item.id)"></div>
</transition>
<div ref="publish" class="m_coll_list">
<router-link class="clearfix" v-if="item.img !== ''" :to="{path: '/detail/' + item.id}">
<div class="m_list_detail">
<p>{{item.news}}</p>
<em class="newspaper">{{item.source}}</em>
<em>{{item.reply}} 评论</em>
</div>
<i class="icon">
<img v-lazy="item.img" alt="">
</i>
</router-link>
<router-link class="clearfix" :to="{path: '/detail/' + item.id}" v-if="item.img === ''">
<p>{{item.news}}</p>
<em class="newspaper">{{item.source}}</em>
<em>{{item.reply}} 评论</em>
</router-link>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
newsList: {
type: Array,
default: []
},
showCheck: Boolean
},
data () {
return {
text: ''
}
},
mounted() {
this.$nextTick(function () {
this.$on('getAllId', function () {
console.log('监听成功')
})
})
},
methods: {
// 选择一个或多个列表
checkOne (e, newsId) {
this.$emit('checkOne', e, newsId)
},
// 获取所有id，全选时用
getAllId () {
this.newsList.forEach((item, index) => {
this.newsId.push(item.id)
})
this.$emit('getAllId', this.newsId)
},
// 点击全选时，checkbox变为选中状态
getAllIds () {
for (let i = 0; i < this.$refs.newList.length; i++) {
if (this.$refs.newList[i].className.indexOf('m_check') === -1) {
alert(2)
} else {
this.$refs.newList[i].className = 'm_check m_checkOne'
}
}
},
// 点击反选时，checkbox变为未选中状态
getWipeIds () {
for (let i = 0; i < this.$refs.newList.length; i++) {
if (this.$refs.newList[i].className.indexOf('m_checkOne') === -1) {
alert(2)
} else {
this.$refs.newList[i].className = 'm_check'
}
}
},
// 点击编辑时，列表向右移动
publish () {
for (let i = 0; i < this.$refs.publish.length; i++) {
this.$refs.publish[i].style.position = 'relative'
this.$refs.publish[i].style.transition = 'left 0.5s'
this.$refs.publish[i].style.left = '50px'
}
this.$emit('publish')
},
// 点击完成时，列表向左移动
published () {
for (let i = 0; i < this.$refs.publish.length; i++) {
this.$refs.publish[i].style.position = 'relative'
this.$refs.publish[i].style.transition = 'left 0.5s'
this.$refs.publish[i].style.left = '0px'
}
this.$emit('published')
}
}
}
</script>
父组件代码
<template>
<div>
<!-- 主体 -->
<!-- <loading v-show="!newsList.length"></loading> -->
<transition name="fadeIn">
<div class="m_mian l_mians">
<back v-if="newsList.length" :spreadhead="spreadhead" :showMore="showMore" :showEdit = "showEdit" :edit="edit" :showTitle="showTitle" @collection="collection"></back>
<back v-else :spreadhead="spreadhead" :showMore="showMore" :showEdit = "showEdit" :showTitle="showTitle" @collection="collection"></back>
<div class="m_newslist m_newslists">
<news-list :newsList="newsList" :showCheck="showCheck" ref="rightshift" @checkOne="checkOne"></news-list>
<div v-else class="no_collection">
暂无收藏数据
</div>
</div>
</div>
</transition>
<transition name="toTop">
<div class="m_share" v-show="showMian">
<div class="all_checked">
<!-- <input type="checkbox" name="" value="" @click="selectAll"> -->
<div class="m_check m_checkAll" v-show="showCheck" @click="checkAll($event)"></div>全选</div>
<div class="m_delete" @click="ctrlColl" v-if="this.newsId.length === 0">删除</div>
<div class="m_delete" @click="ctrlColl" v-else>删除({{this.newsId.length}})</div>
</div>
</transition>
</div>
</template>
<script>
import indexFooter from 'base/footer'
import loading from 'base/loading'
import back from 'base/back'
import {getListHot, getListStar, getNewsUnstar} from 'api/remote'
import newsList from 'base/news-list'
import {ERR_OK} from 'api/config'
import scroll from 'base/scroll'
import Vue from 'vue'
export default {
data () {
return {
newsList: [],
edit: '编辑',
showCheck: false,
refresh_name: '刷新成功',
spreadhead: '收藏',
showMore: false,
showTitle: true,
showEdit: true,
pageNumber: 1,
totalPage: 1,
currentIndex: 1,
showMasking: false,
showMian: false,
newsId: [],
newsIds: [],
allNewsIds: []
}
},
created () {
this._getListStar()
},
watch: {
'$route' (from) {
this._getListStar()
this.edit = '编辑'
this.$refs.rightshift.published()
this.showCheck = false
this.showMian = false
}
},
methods: {
// 删除
ctrlColl () {
getNewsUnstar({
token: window.localStorage.token,
newsId: this.newsId
}).then(res => {
// console.log(res.msg)
this.$refs.rightshift.published()
this.showCheck = false
this.showMian = false
this.edit = '编辑'
this._getListStar()
})
this.newsId = []
console.log(this.newsId)
},
// 选择一个或者多个
checkOne (e, newId) {
if (e.target.className.indexOf('m_checkOne') === -1) {
e.target.className = 'm_check m_checkOne'
// console.log(newId)
this.newsIds.push(newId)
} else {
e.target.className = 'm_check'
var index = this.newsIds.indexOf(newId)
if (index !== -1) {
this.newsIds.splice(index, 1)
}
}
this.newsId = this.newsIds
console.log(this.newsId)
},
// 全选
checkAll (e) {
if (e.target.className.indexOf('m_checkOne') === -1) {
e.target.className = 'm_check m_checkAll m_checkOne'
this.newsList.forEach((item, index) => {
if (this.newsId.indexOf(item.id) === -1) {
this.allNewsIds.push(item.id)
this.newsId = this.allNewsIds
}
})
this.newsId = this.unique(this.newsId)
console.log(this.newsId)
this.$refs.rightshift.getAllIds()
} else {
this.newsId = []
e.target.className = 'm_check m_checkAll'
this.$refs.rightshift.getWipeIds()
}
},
// 数组去重
unique (arr) {
return Array.from(new Set(arr))
},
menuItem (item) {
console.log(item)
},
// 编辑
collection () {
if (this.edit === '编辑') {
this.showMian = true
this.$refs.rightshift.publish()
this.showCheck = true
this.edit = '完成'
} else if (this.edit === '完成') {
this.showMian = false
this.$refs.rightshift.published()
this.showCheck = false
this.edit = '编辑'
}
},
// 获取收藏列表
_getListStar() {
getListStar(window.localStorage.token, this.pageNumber).then((res) => {
if (res.code === ERR_OK) {
this.newsList = res.data.list
}
})
},
clickItem(item) {
this.$router.push({
path: `/detail/${item.id}`
})
},
},
components: {
indexFooter,
newsList,
back,
loading
}
}
</script>
如上便是批量删除的代码，如有疑问，请留言。