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

    """ Cross Site Request Forgery Middleware. This module provides a middleware that imp ...

  2. 子元素位于父元素中央 css实现

    wrap .box{ width: 200px; height:200px; background: pink; // 方案1 position: absolute; top:0; left:0; r ...

  3. Git版本控制及gitlab私有仓库

    Git版本控制系统 版本控制系统简介 版本控制系统是一种记录一个或若干个文件内容变化,以便将来查阅特定版本内容情况的系统 记录文件的所有历史变化 随时恢复到任何一个历史状态 多人协作开发 常见版本管理 ...

  4. spring 转换器和格式化

    Spring总是试图用默认的语言区域将日期输入绑定 到java.util.Date.假如想让Spring使用不同的日期样 式,就需要用一个Converter(转换器)或者 Formatter(格式化) ...

  5. linux php5.6 安装

    如果之前有安装其他版本PHP,请先卸载干净   配置yum源 追加CentOS 6.5的epel及remi源. # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fe ...

  6. java des 加密/解密

    JAVA实现 加密 注意:DES加密和解密过程中,密钥长度都必须是8的倍数 public byte[] desCrypto(byte[] datasource, String password) { ...

  7. 【leetcode】962. Maximum Width Ramp

    题目如下: Given an array A of integers, a ramp is a tuple (i, j) for which i < j and A[i] <= A[j]. ...

  8. 【leetcode】667. Beautiful Arrangement II

    题目如下: Given two integers n and k, you need to construct a list which contains ndifferent positive in ...

  9. bzoj1066题解

    [解题思路] 考虑拆点,把每根石柱拆成两个点,具体可以理解为石柱底部和石柱顶部,能爬到石柱顶部的蜥蜴只有有限只,而且蜥蜴只有爬到了石柱顶部才能跳到其他石柱的底部. 这样,考虑如下建图: 将每个有蜥蜴的 ...

  10. 4-基于DoG的特征检测子(SIFT：稳定性好，实时性差)

    opencv实现 详细原理:https://blog.csdn.net/u010440456/article/details/81483145