vue实现全选、反选功能

前端之家收集整理的这篇文章主要介绍了vue实现全选、反选功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他

基本思路

如果父级选中了,那么父级下面的子集全部选中checked=true;

如果子集中选中了一个,那么父级应该被勾选中

如果子集一个都没有选中,那么父级此时应该没有选中

最后提交用户改变后的数组

(大神原谅我的啰嗦哈)

开始上代码

<Meta charset="UTF-8"> <Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> Document
{{item.name}}

这是html结构部分

基本上没有啥好讲的

只能说一句(我曹,v-for和v-model,真他M的方便呀,哈哈哈哈😁)

里面用到v-for嵌套v-for做数据渲染,看效果效果看起来很low,大神不要在意)

下面开始上js代码

}); } },selectItem: function(item,index) { //父级选中条件 //子集有选中的,那么父级checked=true //some检测的就是有一个满足的就为true item.checked=s.checked ? true : item.children.some(a => a.checked);

},submit: function(item,s) {
//去拿所有的数据,返回给后台
var formData=this.addList;
console.log(JSON.stringify(formData));
}
}
});

最后点击改变的结果

返回给后台就是this.addList,此时已经是改变的结果

在项目中,后台给我的json就是this.addList的样子

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/38584.html

猜你在找的Vue相关文章