elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用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实现全选与反选的更多相关文章
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 前端之 JS 实现全选、反选、取消选中
需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...
- 原生JS实现全选,反选
无样式,比较丑 <!DOCTYPE html><html><head><meta charset="UTF-8"><title ...
- js CheckBox 全选、反选
<h3>你最喜欢的水果是?</h3> <label><input type="checkbox"/>苹果</label> ...
- js react 全选和反选
onCheckAll = (data) => { var CheckBox = document.getElementsByName(data); for(let i=0;i<CheckB ...
- 2016年4月7日 js的全选和反选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 用 JS(JavaScript )实现多选、全选、反选
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Javascript全选,反选,全不选的实现代码
使用js实现全选.反选.全不选. 代码如下: <html> <head> <script type="text/javascript"> fun ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
随机推荐
- Pytest -断言、跳过及运行
基本断言方法: Pytest框架assert断言使用 • 断言:支持显示最常见的子表达式的值,包括调用,属性,比较以及二元和一元运算 符. • 包含,相等,不等,大于 小于运算,assertnot 假 ...
- linux 下新建文件自动加锁的解决办法
导致文件夹里面无法保存别的文件 sudo chmod 777 -R 文件或目录
- CentOS 7 安装详细步骤
VMware安装centos 7 前期准备: 1. VMware虚拟机软件(使用的是15x) 2. CentOS-7-x86_64-DVD-1810.iso 一.安装VMware虚拟机软件 略 二.新 ...
- ZOJ-3524 拓扑排序+完全背包(好题)
题意:在一个DAG上,主角初始有W钱起点在s点,每个点有一个代价wi和价值vi,主角从起点走到某一点不能回头走,一路上可以买东西(一个点的东西可以买无限次),且体力消耗为身上负重*路径长度.主角可以在 ...
- TCP的状态及变迁
十一种状态如下图: 全部11种状态1. 客户端独有的:(1)SYN_SENT (2)FIN_WAIT1 (3)FIN_WAIT2 (4)CLOSING (5)TIME_WAIT .2. 服务器独有的: ...
- HTML ASCII 参考手册
HTML 和 XHTML 用标准的 7 比特 ASCII 代码在网络上传输数据. 7 比特 ASCII 代码可提供 128 个不同的字符值. 7 比特 可显示的 ASCII 代码 结果 描述 实体编号 ...
- Java类的成员之四:代码块.
3.2类的成员之四:代码块 ①初始化块(代码块)作用:对Java对象进行初始化 ②程序的执行顺序: ③一个类中初始化块若有修饰符,则只能被static修饰,称为静态代码块(static block ) ...
- Flex布局(二)
接上一篇,说一下flex布局的实例,转自阮一峰老师的博客
- 【dart学习】-- dart 安装开发环境
前言 说明下:本人只有window和mac,所以安装实践只有这两种,其他的自行尝试.简介:Dart是谷歌开发的计算机编程语言,后来被Ecma (ECMA-408)认定为标准 [1] .它被用于web. ...
- Codeforces gym102222 B.Rolling The Polygon 凸包/余弦定理
题意: 有一个不保证凸的多边形,让你滚一圈,计算某点滚出的轨迹多长. 题解: 求出凸包后,以每个点为转轴,转轴到定点的距离为半径,用余弦定理计算圆心角,计算弧长. #include<iostre ...