在实际项目开发过程中，遇到的需求，需要实现全选以及取消全选等功能，主要使用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. go build报错cannot find package

    go env 关键数据是这样的 GOPATH="/home/zzy/goProject" GOROOT="/usr/local/go" 项目目录是这样的 goP ...

  2. Apache Solr远程命令执行

    简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http G ...

  3. iptables 防火墙（上）

    iptables 防火墙(上) 1. 防火墙概述 1.1 概念与作用 网络中的防火墙是一种将内部网络和外部网络分开的方法,是一种隔离技术.防火墙在内网与外网通信时进行访问控制,依据所设置的规则对数据包 ...

  4. Navicat定时 同步数据库

    转载:https://www.cnblogs.com/DFX339/p/11646812.html 我是用在了 mysql 和 sql server 数据同步(操作一模一样) 好文章,简单粗暴.适合我 ...

  5. 启动Process实现多任务

    from multiprocessing import Process import time '''multiprocessing模块1.跨平台的多进程模块2.提供了一个Process类的实例代表一 ...

  6. Oracle多表更新及MERGE命令和闪回机制还原数据表

    一.多表更新 比如线上有个系统由于某一个模块出现异常,导致系统整体的数据出现了错误,需要你手动改写数据库错误,Oracle update语句更新的值来自另一张表 update语法最基本的格式为 UPD ...

  7. react-native run-android出现红屏错误

    react-native run-android出现 unable to load script from assets 'index.android.bundle'.Make sure your b ...

  8. 历史上最详细的SpringCloud搭建微服务的过程。（包括注册中心，服务提供者和服务消费者）

    首先搭建注册中心,创建一个springboot的maven工程. 工程创建完成之后,先在资源文件中的application.properties中写配置文件. server.port= spring. ...

  9. spring接收文件资源

    提交请求的contentType为multipart/form-data 图片提交在form中的名称为file 后端接收示例 @RequestMapping("/picture") ...

  10. [NOIP模拟测试12]题解

    A. 找规律题.儿子的编号减去 小于它编号的最大的fibonacci数 即可得到它父亲的编号. 然后两个节点都暴力上跳就好了.预处理一下fibonacci数,每次二分查找即可. #include< ...