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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>elementUI+JS实现全选与反选</title>
  8. <!-- 引入样式 -->
  9. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  10. </head>
  11. <body>
  12. <div id="app">
  13. <span>请选项喜欢的水果:</span>
  14. <el-select
  15. v-model="chooseFruit"
  16. multiple
  17. collapse-tags
  18. placeholder="请选择"
  19. style="width: 75%;border-radius: 20px;margin-top:60px;width:280px;"
  20. @change='selectAll'>
  21. <el-option
  22. v-for="item in fruitLists"
  23. :key="item.value"
  24. :label="item.label"
  25. :value="item.value">
  26. </el-option>
  27. </el-select>
  28. </div>
  29.  
  30. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  31. <!-- 引入组件库 -->
  32. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  33. <script>
  34. var vm = new Vue({
  35. el:'#app',
  36. data:{
  37. fruitLists: [
  38. { value: 'all', label: 'ALL' },
  39. { value: 'apple6', label: 'app1e' },
  40. { value: 'orange6', label: 'orange' },
  41. { value: 'pear6', label: 'pear' },
  42. { value: 'banana6', label: 'banana' },
  43. { value: 'mongo6', label: 'mongo' }
  44. ],
  45. oldFruit: [],
  46. chooseFruit: []
  47. },
  48. methods:{
  49. selectAll(val) {
  50. var allFruit = []; //定义包含所有水果的空数组
  51. this.fruitLists.forEach((item,index) => { //给数组赋值
  52. allFruit.push(item.value);
  53. })
  54. // 定义存储上一次选中的水果,以作下一次对比
  55. var lastFruitVal = this.oldFruit.length === 1 ? this.oldFruit[0] : [];
  56. // 全选
  57. if (val.includes('all')){
  58. this.chooseFruit = allFruit;
  59. }
  60. // 取消全选
  61. if (lastFruitVal.includes('all') && !val.includes('all')){
  62. this.chooseFruit = [];
  63. }
  64. // 点击非全部选中,需要排除全部选中以及当前点击的选项
  65. // 新老数据都有全部选中的情况
  66. if (lastFruitVal.includes('all') && val.includes('all')) {
  67. var index = val.indexOf('all')
  68. val.splice(index, 1) // 排除全选选项
  69. this.chooseFruit = val
  70. }
  71. // 全选未选,但是其他选项全部选上时,则全选选上,上次和当前都没有全选
  72. if (!lastFruitVal.includes('all') && !val.includes('all')) {
  73. console.log(11)
  74. if (val.length === allFruit.length - 1){
  75. this.chooseFruit = ['all'].concat(val)
  76. }
  77. }
  78. // 储存当前最后的结果,作为下次的老数据进行对比
  79. this.oldFruit[0] = this.chooseFruit
  80. }
  81. }
  82. })
  83. </script>
  84. </body>
  85. </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. Pytest -断言、跳过及运行

    基本断言方法: Pytest框架assert断言使用 • 断言:支持显示最常见的子表达式的值,包括调用,属性,比较以及二元和一元运算 符. • 包含,相等,不等,大于 小于运算,assertnot 假 ...

  2. linux 下新建文件自动加锁的解决办法

    导致文件夹里面无法保存别的文件 sudo chmod 777 -R 文件或目录

  3. CentOS 7 安装详细步骤

    VMware安装centos 7 前期准备: 1. VMware虚拟机软件(使用的是15x) 2. CentOS-7-x86_64-DVD-1810.iso 一.安装VMware虚拟机软件 略 二.新 ...

  4. ZOJ-3524 拓扑排序+完全背包(好题)

    题意:在一个DAG上,主角初始有W钱起点在s点,每个点有一个代价wi和价值vi,主角从起点走到某一点不能回头走,一路上可以买东西(一个点的东西可以买无限次),且体力消耗为身上负重*路径长度.主角可以在 ...

  5. TCP的状态及变迁

    十一种状态如下图: 全部11种状态1. 客户端独有的:(1)SYN_SENT (2)FIN_WAIT1 (3)FIN_WAIT2 (4)CLOSING (5)TIME_WAIT .2. 服务器独有的: ...

  6. HTML ASCII 参考手册

    HTML 和 XHTML 用标准的 7 比特 ASCII 代码在网络上传输数据. 7 比特 ASCII 代码可提供 128 个不同的字符值. 7 比特 可显示的 ASCII 代码 结果 描述 实体编号 ...

  7. Java类的成员之四:代码块.

    3.2类的成员之四:代码块 ①初始化块(代码块)作用:对Java对象进行初始化 ②程序的执行顺序: ③一个类中初始化块若有修饰符,则只能被static修饰,称为静态代码块(static block ) ...

  8. Flex布局(二)

    接上一篇,说一下flex布局的实例,转自阮一峰老师的博客

  9. 【dart学习】-- dart 安装开发环境

    前言 说明下:本人只有window和mac,所以安装实践只有这两种,其他的自行尝试.简介:Dart是谷歌开发的计算机编程语言,后来被Ecma (ECMA-408)认定为标准 [1] .它被用于web. ...

  10. Codeforces gym102222 B.Rolling The Polygon 凸包/余弦定理

    题意: 有一个不保证凸的多边形,让你滚一圈,计算某点滚出的轨迹多长. 题解: 求出凸包后,以每个点为转轴,转轴到定点的距离为半径,用余弦定理计算圆心角,计算弧长. #include<iostre ...