在实际项目开发过程中，遇到的需求，需要实现全选以及取消全选等功能，主要使用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. springboot整合netty，多种启动netty的方式，展现bean得多种启动方法

    首先讲解下,spring中初始化加载问题: 很多时候,我们自己写的线程池,还有bean对象,还有其他的服务类,都可以通过,相关注解进行交给spring去管理,那么我们如何让nettyserver初始化 ...

  2. SQL Server 2014 中新建登录及权限分配【界面版】

    本篇经验将和大家介绍分配SQL Server 2014 中,新建登录用户,分配权限,并指定该用户的数据库的方法,希望对大家的工作和学习有所帮助! 方法/步骤 1 打开 MS SQL Server Ma ...

  3. openses机制

    openses 大体结构解读 页面html与相关php文件的定位 点击界面,查看出现的url 例如: http://localhost/opensns/index.php?s=/people/inde ...

  4. pygame征途：（一）图片移动反弹

    题目大意: 就是弄一张图片在背景画布上移动,然后碰到边界就图片翻转并且反向移动 基本思路: 需要pygame常用的一些常用的函数,然后基本就是在背景画布上blit一张图片,然后移动就是先全刷成背景画布 ...

  5. tengine日志切割-配置分钟级别日志自动切割

    tengine日志切割-配置分钟级别日志自动切割 安装 以安装最新版本的tengine-2.1.2版本 下载连接 tengine支持许多变量 变量 $conn_requests 当前请求在长连接上的序 ...

  6. Magento用SQL语句开发篇

    有时为了调试magento,需要获取当前的查询sql语句,在magento中获取SQL语句,这里我们通过$collection->getSelectSql(true)来调试sql 1 $coll ...

  7. JVM调优学习 【更新中】

    JVM调优(jdk1.8) 老生常谈,面试吹牛的的最佳谈资,在接下来的几天里,我找了点资料来对其进行一波学习: 本地环境是不需要对我们的虚拟机进行优化的,一般在生产环境下,也就是Linux下才有对JV ...

  8. 【Dart学习】-- Dart之注释

    Dart支持三种注释类型: 单行注释,多行注释,文档注释. 单行注释单行注释以//开头,从//开始到一行结束的所有内容都会被Dart编译器忽略,示例代码如下: main(){ //打印输出 print ...

  9. 数字三角形W(加强版) codevs 2189

    2189 数字三角形W 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题目描述 Description 数字三角形 要求走到最后mod 100最大 输入描述 Inpu ...

  10. 搭建appium自动化测试环境

    注意:请使用不用的手机测试,appium会把微信app重新安装,记录都会清除 一.安装Java JDK JDK下载地址:https://www.oracle.com/technetwork/java/ ...