vuejs2实现全选和反选，不使用id

来源：互联网发布：虚拟机安装教程linux 编辑：程序博客网时间：2024/06/07 15:43

使用vuejs2实现全选和反选，其实网上都有很多的教程了，这一次我写，主要是使用index，而不是使用id，因为有些时候，如果数据传输过多，后端不会给id的，这时候，就需要使用index来进行全选的功能，其实都大同小异，大家可以根据自己的需求进行修改

github的项目地址：https://github.com/fengliting/vue-checked，如果喜欢给本文一个赞！

<div id="checked">
<div>选中了{{indexs.length}}条</div>
<table>
<tr>
<th><input type="checkbox" @click="checkAll" v-model="allChecked"></th>
<th>名字</th>
<th>年龄</th>
<th>体重</th>
</tr>
<tr v-for="(data,index) in list">
<td>
<input type="checkbox" :value="index" v-model="indexs">
</td>
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.weight}}</td>
</tr>
</table>
</div>
<script>

var list = [{
name:'Mary',
age:17,
weight:54,
},{
name:'Away',
age:24,
weight:65,
},{
name:'Ali',
age:32,
weight:48,
},{
name:'Lili',
age:55,
weight:60,
}]
new Vue({
el:'#checked',
data:{
list:list,
// 全选的默认
allChecked:false,
indexs:[],
},
methods:{
checkAll:function(){
var _this = this;
// 如果为true的时候
if(!_this.allChecked){
_this.indexs = _this.list.map(function(json,index){
// console.log(json)
return index
})
}else {
_this.indexs = []
}
}
}
})
</script>

阅读全文

0 0