zoukankan      html  css  js  c++  java
  • element UI select组件全选

    
    
     <el-select class="fr" v-model="searchJobType" style=" 185px; margin-right:8px;" size="mini" type="text" multiple collapse-tags @change="changeSelect" placeholder="请选择类型查询">
        <el-option v-for="(type,ind) in typeList" :key=ind :label="type.label" :value="type.value"></el-option>
      </el-select>
    
    var Main = {
        data() {
          return {
            searchJobType: ['ALL_SELECT','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
            oldSearchJobType: [['ALL_SELECT','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10']],
            typeList: [
              {value: 'ALL_SELECT', label: '全部'},
              {value: '00', label: 'label0'},
              {value: '01', label: 'label1'},
              {value: '02', label: 'label2'},
              {value: '03', label: 'label3'},
              {value: '04', label: 'label4'},
              {value: '05', label: 'label5'},
              {value: '06', label: 'label6'},
              {value: '07', label: 'label7'},
              {value: '08', label: 'label8'},
              {value: '09', label: 'label9'},
              {value: '10', label: 'label10'},
            ]
          }
        },
        methods:{
            changeSelect(val) {
            const allValues = [];
            // 保留所有值
            for (const item of this.typeList) {
              allValues.push(item.value)
            }
            // 用来储存上一次的值,可以进行对比
            const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
            // 若是全部选择
            if (val.includes('ALL_SELECT')) this.searchJobType = allValues;
            // 取消全部选中 上次有 当前没有 表示取消全选
            if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchJobType = [];
            // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
            // 新老数据都有全部选中
            if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
              const index = val.indexOf('ALL_SELECT');
              val.splice(index, 1); // 排除全选选项
              this.searchJobType = val
            }
            // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
            if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
              if (val.length === allValues.length - 1) this.searchJobType = ['ALL_SELECT'].concat(val)
            }
            // 储存当前最后的结果 作为下次的老数据
            this.oldSearchJobType[0] = this.searchJobType;
          },
        }
      }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
     
      
  • 相关阅读:
    是什么造成了数据库的卡顿
    机器学习笔记(六) ---- 支持向量机(SVM)
    机器学习笔记(五)---- 决策树
    了解 MongoDB 看这一篇就够了【华为云分享】
    王晶:华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019
    【HUAWEI Mate30】抽奖啦!华为IoT新福利上线!
    高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染
    【华为云社区】悟一下动态规划
    理解递归与动态规划
    Laravel 文件上传失败的问题 error 7
  • 原文地址:https://www.cnblogs.com/zhenggaowei/p/9828364.html
Copyright © 2011-2022 走看看