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脚本性能的优化方法
Feb 02 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
详解a++和++a的区别
Aug 30 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
JS执行控制之节流模式实例分析
2018/12/21 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Django日志及中间件模块应用案例
2020/09/10 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
总经理司机岗位职责
2014/02/06 职场文书
西式结婚主持词
2014/03/14 职场文书
医学求职信
2014/05/28 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
房产公证书样本
2015/01/23 职场文书
2015年教研工作总结
2015/05/23 职场文书
七年级语文教学反思
2016/03/03 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers