在实际项目开发过程中，遇到的需求，需要实现全选以及取消全选等功能，主要使用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. android中的原始资源的使用

    原始资源可以放在两个地方: 1.位于/res/raw目录下,android SDK会处理该目录下的原始资源,android SDK会在R清单类中为该目录下的资源生成一个索引项. 2.位于/assets ...

  2. RocketMQ事务性消息

    mq事务介绍 mq事务消息流程 生产者发送消息到mq,消息状态为:SEND_OK.此消息是消费者不可见(消费者无法消费此条消息) 执行本地任务:成功则返回COMMIT_MESSAGE,此时消费者可消费 ...

  3. 当vue页面异步加载的数据想在页面上渲染怎么办

    <template> <div class="test"> <div v-for="(item, index) in arr" : ...

  4. Linear Regression（一）——

    Linear Regression(一)-- 机器学习 回归 定义 回归的定义 在平面上存在这些点我希望能用一条直线尽可能经过它们. 于是我们画了下面的一条直线 这样的过程就叫做回归. 这个过程中我们 ...

  5. mysql-一行分隔成多行数据

    mysql将某个字段有分隔符号分隔成多行数据 SELECT a.id, a. NAME, substring_index( substring_index( a.name, ',', b.help_t ...

  6. 实战：基于 Spring 的应用配置如何迁移至阿里云应用配置管理 ACM

    最近遇到一些开发者朋友,准备将原有的Java Spring的应用配置迁移到 阿里云应用配置管理 ACM 中.迁移过程中,遇到不少有趣的问题.本文将通过一个简单的样例来还原迁移过程中遇到的问题和相关解决 ...

  7. APUE线程控制

    一.线程的限制 sysconf可以查看的值 PTHREAD_DESTRUCTOR_ITERATIONS 线程退出时操作系统实现试图销毁线程特定数据的最大次数 _SC_THREAD_DESTRUCTOR ...

  8. ORACLE动态sql在存储过程中出现表或视图不存在的解决方法

    Oracle动态sql在存储过程中出现表或视图不存在的解决方法 CREATE OR REPLACE PROCEDURE P_test is strsql varchar2(2000); BEGIN   ...

  9. Android中的surfaceHolder.lockCanvas(null)返回为null详解

    对于新手学习SurfaceView的时候获取lockCanvas的时候总是返回null的问题很是纠结 canvas = surfaceHolder.lockCanvas(new Rect(0, 0, ...

  10. Delphi Base64编码_解码及ZLib压缩_解压（转）

    最近在写的程序与SOAP相关,所以用到了一些Base64编码/解码及数据压缩/解压方面的知识. 在这里来作一些总结:一.Base64编码/解码 一般用到的是Delphi自带的单元EncdDecd,当然 ...