在实际项目开发过程中，遇到的需求，需要实现全选以及取消全选等功能，主要使用ElementUI + JS来实现，具体代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>elementUI+JS实现全选与反选</title>

     <!-- 引入样式 -->

     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

 </head>

 <body>

     <div id="app">

         <span>请选项喜欢的水果：</span>

         <el-select

             v-model="chooseFruit"

             multiple

             collapse-tags

             placeholder="请选择"

             style="width: 75%;border-radius: 20px;margin-top:60px;width:280px;"

             @change='selectAll'>

             <el-option

                 v-for="item in fruitLists"

                 :key="item.value"

                 :label="item.label"

                 :value="item.value">

             </el-option>

         </el-select>

     </div>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 引入组件库 -->

     <script src="https://unpkg.com/element-ui/lib/index.js"></script>

     <script>

         var vm = new Vue({

             el:'#app',

             data:{

                 fruitLists: [

                     { value: 'all', label: 'ALL' },

                     { value: 'apple6', label: 'app1e' },

                     { value: 'orange6', label: 'orange' },

                     { value: 'pear6', label: 'pear' },

                     { value: 'banana6', label: 'banana' },

                     { value: 'mongo6', label: 'mongo' }

                     ],

                 oldFruit: [],

                 chooseFruit: []

             },

             methods:{

                 selectAll(val) {

                     var allFruit = [];    //定义包含所有水果的空数组

                     this.fruitLists.forEach((item,index) => {   //给数组赋值

                         allFruit.push(item.value);

                     })

                     // 定义存储上一次选中的水果，以作下一次对比

                     var lastFruitVal = this.oldFruit.length === 1 ? this.oldFruit[0] : [];

                     // 全选

                     if (val.includes('all')){

                         this.chooseFruit = allFruit;

                     }

                     // 取消全选

                     if (lastFruitVal.includes('all') && !val.includes('all')){

                         this.chooseFruit = [];

                     }

                     // 点击非全部选中，需要排除全部选中以及当前点击的选项

                     // 新老数据都有全部选中的情况

                     if (lastFruitVal.includes('all') && val.includes('all')) {

                         var index = val.indexOf('all')

                         val.splice(index, 1) // 排除全选选项

                         this.chooseFruit = val

                     }

                     // 全选未选，但是其他选项全部选上时，则全选选上，上次和当前都没有全选

                     if (!lastFruitVal.includes('all') && !val.includes('all')) {

                         console.log(11)

                         if (val.length === allFruit.length - 1){

                             this.chooseFruit = ['all'].concat(val)

                         }

                     }

                     // 储存当前最后的结果，作为下次的老数据进行对比

                     this.oldFruit[0] = this.chooseFruit

                 }

             }

         })

     </script>

 </body>

 </html>

elementUI+JS实现全选与反选的更多相关文章

  1. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. 前端之 JS 实现全选、反选、取消选中

    需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...

  3. 原生JS实现全选，反选

    无样式,比较丑 <!DOCTYPE html><html><head><meta charset="UTF-8"><title ...

  4. js CheckBox 全选、反选

    <h3>你最喜欢的水果是?</h3> <label><input type="checkbox"/>苹果</label> ...

  5. js react 全选和反选

    onCheckAll = (data) => { var CheckBox = document.getElementsByName(data); for(let i=0;i<CheckB ...

  6. 2016年4月7日 js的全选和反选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  7. 用 JS（JavaScript ）实现多选、全选、反选

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. Javascript全选，反选，全不选的实现代码

    使用js实现全选.反选.全不选. 代码如下: <html> <head> <script type="text/javascript"> fun ...

  9. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

随机推荐

  1. 我学习的自定义ASP.NET分页控件

    public class MyPagecontroll { public int TotalCount { get; set; }//数据的总条数 public int PageSize { get; ...

  2. JAVA计算整数的位数

    /** * 计算整数的位数 * @param x * @return */ public static int countIntegerLength(int x){ final int [] size ...

  3. 代理-jdk动态代理

    1.基于接口的实现,要jdk动态代理的类必须要实现一个接口: 2.中介类:实现了InvocationHandler,并重写这个接口的 方法(public Object invoke(Object pr ...

  4. stdio - 标准输入输出库函数

    SYNOPSIS 总览 #include <stdio.h> FILE *stdin; FILE *stdout; FILE *stderr; DESCRIPTION 描述 标注 I/O ...

  5. [转载]MinGW安装过程

    本文转自https://blog.csdn.net/my_wade/article/details/46941645 MinGW安装过程 一． 下载 MinGW官网下载地址:http://source ...

  6. vector 有点麻烦啊 能简单点么？

    #include <iostream> #include <cstdlib> #include <cstring> #include <cstdio> ...

  7. MyBatis 传递多个参数的几种方法

      简介: MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简 ...

  8. Dubbo---zookeeper 注册中心---xml配置

    1.项目结构(maven项目) 2.pom <?xml version="1.0" encoding="UTF-8"?> <project x ...

  9. sql 性能优化 索引碎片

    1.索引 简单的说,索引就像书本的目录,目录可以快速找到所在页数,数据库中索引可以帮助快速找到数据,而不用全表扫描,合适的索引可以大大提高数据库查询的效率.(1). 优点大大加快了数据库检索的速度,包 ...

  10. 帝国cms返回首页

    <a href="[!--news.url--]">返回首页</a>