template HTML 结构
radio 我是用的vux 中的checker 组件;(这个可以改成原生radio ;也可以绑定v-model)
<div class="list" v-for="(item,index) in messageList"><div class="top flex-row"><div class="radio article flex-grow-0"><checker v-model="item.model" @click.native="change(index)" default-item-class="defaultClass"selected-item-class="selectedClass"><checker-item @on-item-click="onItemClick" :value="item.id"></checker-item></checker></div><div class="time flex-grow-1 flex-right"><div>{{item.insertTime}}</div></div></div><div @click="toDetails(item.id)" class="bottom flex-row"><div v-if="item.hasRead==0" class="small_article flex-grow-0"></div><div class="flex-grow-1"><div class="title">{{item.title}}</div><p class="desc">{{item.content}}</p></div></div></div>复制代码
先看页面图吧
主要用的是知识点 就是 vue 中的 $set 方法;可以给任意对象设置属性,
这里就是没选一个就给当前项的list设置一个checked 属性true 否则就是false
change(index) {if (this.parentVal) {this.$set(this.messageList[index], 'checked', true);} else {this.$set(this.messageList[index], 'checked', false);}// console.log(this.selectMessage);},复制代码
再来一个计算属性来过滤控制messageList中那几个别选中并存在一个数组中
computed: {selectMessage() {let selectMessage = [];this.messageList.forEach((val) => {if (val.checked) {selectMessage.push(val);//val.model=val.selected;}});return selectMessage;}},复制代码
在来看看顶部选项的操作
topItemClick(index) {var that = this;//删除if (index == 2) {if (this.selectMessage.length > 0) {var messageIds = '';this.selectMessage.forEach((val) => {if (val.checked) {messageIds += val.id + ',';}});messageIds = messageIds.substr(0, messageIds.length - 1)this.$vux.confirm.show({title: '温馨提示',content: `确定要删除该消息`,confirmText: '确定',onCancel() {},onConfirm(msg) {that.$ajax.get(MESSAGEDELETE, {messageIds: messageIds}, res => {that.initData();});}});}} else if (index == 0) {//全选this.messageList.forEach((val, index) => {if (val) {this.$set(this.messageList[index], 'model', val.id);this.$set(this.messageList[index], 'checked', true);}})} else if (index == 1) {//反选this.messageList.forEach((val, index) => {if (val.checked) {this.$set(this.messageList[index], 'model', '');this.$set(this.messageList[index], 'checked', false);} else {this.$set(this.messageList[index], 'model', val.id);this.$set(this.messageList[index], 'checked', true);}})}},复制代码
复习哈 数组api -> splice
splice(index,len,[item]) 注释:该方法会改变原始数组。
splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值
index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空
删除 arr.splice(1,1)
替换 arr.splice(1,1,'ttt')
添加 arr.splice(1,0,'ttt' )
如果觉得《vue 工作项目中 实现消息列表的 全选 反选 删除功能》对你有帮助,请点赞、收藏,并留下你的观点哦!