vue实现全选、反选功能


Posted in Javascript onNovember 17, 2020

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

基本思路

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

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

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

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

(大神原谅我的??鹿??/p>

开始上代码

<!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" rel="external nofollow" >
</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,大神不要在意)

vue实现全选、反选功能

下面开始上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=true
   if(item.checked){
     item.children.forEach(function(item){
      item.checked=true;
     });
   }else{
   //相反,如果没有被选中,子集应该全部checked=false
     item.children.forEach(function(item){
    item.checked=false;
  
    });
   }
  },
 selectItem: function(item,s,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));
 }
 }
 });

最后点击改变的结果

vue实现全选、反选功能

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

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

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
javascript import css实例代码
Jul 18 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
javascript实现密码验证
Nov 10 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
vue中将网页打印成pdf实例代码
Jun 15 #Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 #Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 #Javascript
微信小程序canvas写字板效果及实例
Jun 15 #Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JS重载实现方法分析
2016/12/16 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
Python MD5加密实例详解
2017/08/02 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
学习和使用python的13个理由
2019/07/30 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
努力学习演讲稿
2014/05/10 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python