vue多选、全选和选中删除问题

<div id="vueContainer"><div><input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选<div v-for='(fruit, index) in fruits' :key="index"><!--判断fruitIds是否包含当前fruit，fruitIds.indexOf(fruit.fruitId)返回包含fruit的下标, 若不包含则返回-1--><input type='checkbox' :checked="fruitIds.indexOf(fruit.fruitId) > -1" name='checkboxinput' class='input-checkbox' @click='checkedOne(fruit.fruitId)'>{{fruit.value}}</div><!--默认删除按钮不能点击, 当选中某一checkbox时可以删除--><button :disabled="!fruitIds.length>0" value="Delete" @click="deleteFruits()">Delete</button></div>
</div>

<script>var vue = new Vue({el: "#vueContainer",data: {fruits:[{fruitId:'1',value:'苹果'},{fruitId:'2',value:'荔枝'},{fruitId:'3',value:'香蕉'},{fruitId:'4',value:'火龙果'}],fruitIds:['1','3','4'],isCheckedAll: false},methods:{checkedOne (fruitId) {let idIndex = this.fruitIds.indexOf(fruitId)if (idIndex >= 0) {// 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)this.fruitIds.splice(idIndex, 1)} else {// 选中该checkboxthis.fruitIds.push(fruitId)}},checkedAll () {this.isCheckedAll = !this.isCheckedAllif (this.isCheckedAll) {// 全选时this.fruitIds = []var _that = this// 此写法 其实就是异步函数 this 的指向问题，传入一个this参数
//                  this.fruits.forEach(function (fruit) {//                      console.log(fruit)
//                      this.fruitIds.push(fruit.fruitId)
//                  },this)this.fruits.forEach((val,index) =>{this.fruitIds.push(val.fruitId)})} else {this.fruitIds = []}},deleteFruits () {var newDate = [];this.fruits.forEach((val,index) => {if (!(this.fruitIds.indexOf(val.fruitId) > -1)) {newDate.push(val)}})this.fruits = newDate;this.fruitIds = [];
//              var arr = [];
//              var len = this.fruits.length;
//              for(var i=0;i<len;i++){//                  if(this.fruitIds.indexOf(this.fruits[i].fruitId)>=0){//                      console.log(this.fruitIds.indexOf(i));
//                  }else {//                      console.log(this.fruits[i]);
//                      arr.push(this.fruits[i]);
//                  }
//              }
//              this.fruits = arr;
//              this.fruitIds = [];}}});
</script>

————————————————
版权声明：本文为CSDN博主「一个耕耘在后端的前端」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39090097/article/details/82463869

vue多选、全选和选中删除问题相关推荐

VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
如何用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
vue实现购物车全选，总计等功能
一.单价商品的小计整个操作过程是,商品的数量是可以控制的,可增可减,最少为1.并且在数量的变化中,商品的小计也在变化. 二.单选选中商品在购物车中,需要选择当前想买的商品,这一功能成为商品的单选, ...
vue 多层双层全选_vue2.0 实现全选和全不选
实现思路: 1. v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 ...
vue 实现el-select组件配合 el-tabs 完成动态tabs然后有勾选全选，还有模拟提交，回显数据
cv即可使用 <!DOCTYPE html> <!DOCTYPE html> <html lang="en"><head><m ...
vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
Vue实现购物车全选及价格计算
<vuejs实战>这本书中5.5是一道实战题:利用计算属性.指令等知识开发购物车. 练习1:在当前示例基础上扩展商品列表,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提 ...
vue中实现全选多选
一.给全选框绑定点击事件 HTML: <div class="fixedLef" @click="chooseAllCart"><input ...

vue多选、全选和选中删除问题

vue多选、全选和选中删除问题相关推荐

最新文章

热门文章