一、搭建自己所需要的table列表
<div class="mian"><table width="150" height="40" cellspacing="0"><tr><td><input type="checkbox"></td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td><input type="checkbox"></td><td>1</td><td>2</td><td>3</td></tr></table></div>
二、渲染数据
<template><div class="mian"><table width="150" height="40" cellspacing="0"><tr><td><input type="checkbox"></td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr v-for="(item,index) in list" key="item.id"><td><input type="checkbox"></td><td>{{item.name}}</td><td>{{item.sex}}</td><td>{{item.age}}</td></tr></table></div></template><script>export default{data(){return{list:[{id:'12345678',name:'张三',sex:0,age:'19'},{id:'12344677',name:'李四',sex:1,age:'19'},{id:'12343674',name:'王五',sex:0,age:'19'},{id:'12342673',name:'赵六',sex:0,age:'19'},{id:'12341672',name:'小花',sex:1,age:'19'}] //list模拟接口请求出来的数据}},methods:{}}</script>
现在运行一下代码，看看你运行后是否如下图一样（样式除外）：
三、向数据中添加字段及v-model对应字段
<template><div class="mian"><table width="150" height="40" cellspacing="0" ><tr><td><input type="checkbox" v-model="allchecked"></td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr v-for="(item,index) in list" key="item.id"><td><input type="checkbox" v-model="item.checkeds"></td><td>{{item.name}}</td><td>{{item.sex}}</td><td>{{item.age}}</td></tr></table></div></template><script>export default{data(){return{allchecked:false,// table表头复选框字段list:[{id:'12345678',name:'张三',sex:0,age:'19'},{id:'12344677',name:'李四',sex:1,age:'19'},{id:'12343674',name:'王五',sex:0,age:'19'},{id:'12342673',name:'赵六',sex:0,age:'19'},{id:'12341672',name:'小花',sex:1,age:'19'}] //list模拟接口请求出来的数据}},mounted() {this.list.map((item,index)=>{item.checkeds=false;}) //向列表每一条数据中添加checkeds字段},methods:{}}</script>
四、全选、全不选实现方式
methods:{//实现全选功能inputcheck(){this.list.map((item,index)=>{item.checkeds=!this.allchecked;})}}
五、反选实现方式
methods:{//实现全选功能inputcheck(){this.list.map((item,index)=>{item.checkeds=!this.allchecked;})},// 实现反选功能tdcheckeds(){let self = this;this.list.map((item,index)=>{if(item.checkeds!==false){self.allchecked=item.checkeds;self.checkedlist.push(item);}else{let e = self.checkedlist;for (let i = 0; i <= e.length; i++) {if (e[i] !== undefined) {if (e[i].id === item.id) {self.checkedlist.splice(i, 1);}}}}})}},watch:{checkedlist(e){ //如果多选数据发生改变时就会运行次函数if (e.length === 0) {this.allchecked = false;}}}
六、table属性
如果觉得《Vue实现全选 反选 全不选功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
