elementUI+JS实现全选与反选
Posted Luckily
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了elementUI+JS实现全选与反选相关的知识，希望对你有一定的参考价值。
在实际项目开发过程中，遇到的需求，需要实现全选以及取消全选等功能，主要使用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实现全选与反选的主要内容，如果未能解决你的问题，请参考以下文章