[原]vue实现全选，反选

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

基本思路

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

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

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

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

（大神原谅我的啰嗦哈?）

开始上代码

<!DOCTYPE html>
<html lang="en">
<head><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"><title>Document</title><link rel="stylesheet" href="css/role.css">
</head>
<body><div id="content" v-cloak><form @submit.prevent="submit"><div class="list" v-for="item in addList"><h3 class="title"><label for=""><input type='checkbox' class='item-check-btn'  v-model="item.checked" @click="selectAll(item)"></label>{{item.name}}</h3><ul class="menu"><li v-for="(s,index) in item.children"><label for=""><input type='checkbox' :value="index" v-model="s.checked" class='item-check-btn' @click="selectItem(item,s,index)"></label>{{s.name}}</li></ul></div><div class="bottom_btn"><input type="submit" value="确认选择" class="btn"></div></form></div></body>
<script src="js/lib/vue.js"></script>
<script src="1.js"></script>
</html>

这是html结构部分

基本上没有啥好讲的

只能说一句（我曹，v-for和v-model，真他M的方便呀，哈哈哈哈?）

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

下面开始上js代码了

new Vue({el: "#content",data: {addList: [{"name":"用户管理","checked":true,"children":[{"name":"添加","checked":true},{"name":"删除","checked":false},{"name":"修改","checked":true}]}]},methods: {selectAll: function(item) {//如果父级被选中，那么子集循环，全被给checked=trueif(item.checked){item.children.forEach(function(item){item.checked=true;});}else{//相反，如果没有被选中，子集应该全部checked=falseitem.children.forEach(function(item){item.checked=false;});}},selectItem: function(item,s,index) {//父级选中条件//子集有选中的，那么父级checked=true//some检测的就是有一个满足的就为trueitem.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.cnblogs.com/null11/p/7018365.html

[原]vue实现全选，反选相关推荐

php 全选反选,利用vue实现全选反选功能
这次给大家带来利用vue实现全选反选功能,利用vue实现全选反选功能的注意事项有哪些,下面就是实战案例,一起来看一下. 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比 ...
关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
jQuery如何动态删除TR，input按钮删除本行记录,checkbox全选反选
checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...
JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
Jquery实现全选反选
Jquery实现全选反选 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...

[原]vue实现全选，反选

基本思路

下面开始上js代码了

[原]vue实现全选，反选相关推荐

最新文章

热门文章