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" 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，大神不要在意）

下面开始上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));
  }
  }
  });

最后点击改变的结果

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0在table中实现全选和反选的示例代码

    vue2.0在table中实现全选和反选的示例代码

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • vue实现全选和反选功能

    本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src = "vue.j

  • vue使用监听实现全选反选功能

    最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码. 首先定义数据 data: { /*全选.全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false}, {cityName:"西城区",isCheck:false}, {cityName

  • AngularJS 实现购物车全选反选功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en" ng-app="testMo"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css&qu

  • JQuery实现列表中复选框全选反选功能封装(推荐)

    JQuery实现列表中复选框全选反选功能封装(推荐)

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(

  • 3分钟写出来的Jquery版checkbox全选反选功能

    复制代码 代码如下: //反选 function selectnoALL() { $("input:checkbox").each(function (i) { if (this.checked) { this.checked = false; } else { this.checked = true; } }); } //全选 function selectALL() { var chelength = $("input:checkbox").length; $(

  • AngularJS实现全选反选功能

    AngularJS实现全选反选功能

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo

  • 解决JQuery全选/反选第二次失效的问题

    解决JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了. 原代码大致结构关键如下: function selectAll(obj){ $('input[name="xxx[]"]').attr("checked",obj.checked); } <input type="checkbox" id="mother" name="

  • 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$("input[type='checkbox'][name='che']").attr("checked") 获取结果为undefined),这样就无法通过if语句判断是否选中,从而实现反选功能. 我们先来理一下思路:既然"反选"功能的实现是通过判断是否有che

  • vue实现全选功能

    本文实例为大家分享了vue实现全选功能的具体代码,供大家参考,具体内容如下 全选思路 1.准备标签,样式,js,准备数据 2.将数据循环展示在页面上, 在li 里v-for 3.在全选框 v-model = "isAll" //总的状态 4.小选框 v-model = "" //单个的状态 5.小选影响全选 ... 定义计算属性 isAll 统计小选框的状态, every查找数组里不符合条件的,直接返回false ...判断每一个小选框的状态, 只要有一个小选框的状

随机推荐