vue 多层双层全选_vue2.0 实现全选和全不选

实现思路：

1、 v-model 一个收集所有input(除全选框外)数组checkModel ，vue会动态将其checked为true的input的value值存入数组checkModel里

2 、watch函数来监听checkModel 属性，当其长度==input元素时全选按钮选中否则取消

3 、全选按钮v-model checked 属性来显示当前选中状态 click事件里当checked为true时全选所有input按钮被选中也就是checkModel的遍历存入其value值

html代码：

全选

{{item.name}}--

{{item.age}}--

{{item.money}}元

删除

js代码：

data(){

return {

list:[

{id:1,name:"明明",age:23,money:100},

{id:2,name:"红红",age:18,money:200},

{id:3,name:"强强",age:29,money:300}

checked:false, //是否全选

checkModel:[] //双向数据绑定的数组，我是用的id

}

watch:{

checkModel(){

if(this.checkModel.length==this.list.length){

this.checked=true;

}else{

this.checked=false;

}

methods:{

checkAll(){

if(this.checked){

this.checkModel=[];

}else{

this.list.forEach((item)=>{

if(this.checkModel.indexOf(item.id)==-1){

this.checkModel.push(item.id)

}

})

}

效果如图：

注：删除效果我用的是element-ui，有兴趣的朋友可以研究下

vue 多层双层全选_vue2.0 实现全选和全不选相关推荐

vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
【转】不分主副卡！全网通5.0时代到来
全网通在今天已经不是噱头了,它经历了有5年时间,从过去的全网通1.0到现在的全网通5.0,可以说有这长足的发展.今年,小米率先了支持全网通5.0的小米MIX 2S和红米Note5,可以双卡双待4G,一 ...
vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
vue大屏展示代码从0 到1
1.基本骨架 2.填充内容 3.G2图 4.大屏数据展示组件库DataV 官网 1.基本骨架 <template><div id="parentDiv">& ...
苹果和虫子编程题python_2020智慧树《兽医寄生虫学》免费最全题库2020中国大学mooc《线性代数习题选讲》...
2020智慧树<兽医寄生虫学>免费最全题库2020中国大学mooc<线性代数习题选讲>章节答案更多相关问题 [多选题]<合同法>第122条规定,因当事人一方违约行 ...
【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了！
这里是修真院小课堂,本篇分析的主题是 [WEB程序员从零开始到就业的全资料V1.0] 前言这是两年以来,修真院收集整理的学习资料顺序. 以CSS15个任务,JS15个任务为基础,分别依据要完成任务的 ...
vue 多层表格嵌套
** vue 多层表格嵌套 ** 后台数据 `在这里插入代码片var table1 = [ {id: 1,name: "加强组织领导夯实基础工作",sore: "18分& ...

vue 多层双层全选_vue2.0 实现全选和全不选

vue 多层双层全选_vue2.0 实现全选和全不选相关推荐

最新文章

热门文章