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操纵Cookie实现购物车程序
Nov 23 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
javascript的数组和常用函数详解
May 09 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP _construct()函数讲解
2019/02/03 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Node.JS如何实现JWT原理
2020/09/18 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
举例详解Python中yield生成器的用法
2015/08/05 Python
Python遍历pandas数据方法总结
2018/02/09 Python
pytorch打印网络结构的实例
2019/08/19 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python中return的返回和执行实例
2019/12/24 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
财务情况说明书范文
2014/05/06 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
公司慰问信范文
2015/03/23 职场文书
如何写观后感
2015/06/19 职场文书