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一些题目的解析
Dec 25 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
React中的render何时执行过程
Apr 13 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
详解一些适用于Node.js的命名约定
Dec 08 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 强制下载文件代码
2010/10/24 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
详解YII关联查询
2016/01/10 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python实现图片彩色转化为素描
2019/01/15 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
pygame实现打字游戏
2021/02/19 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
TCP/IP的分层模型
2013/10/27 面试题
打架检讨书100字
2014/01/08 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2014年政协工作总结
2014/12/09 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers