• elementUI的select全选


    elementUI中的el-select全选

    <template>
        <el-select class="handle-select"
                size="mini" 
                v-model="Bank" clearable multiple collapse-tags
                @change="selectAll" @focus="setBank">
                <el-option
                  v-for="item in Banks"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
         </el-select>
    </template> 
    data() {
    return {
      bank: [],
      banks: [
        {
          "id": "0",
          "value": "全选"
        },
        {
          "id": "1",
          "value": "农行"
        },
        {
          "id": "2",
          "value": "工行"
        },
        {
          "id": "3",
          "value": "建行"
        },
        {
          "id": "4",
          "value": "中信"
        },
        {
          "id": "5",
          "value": "招行"
        },
        {
          "id": "6",
          "value": "邮政"
        },
        {
          "id": "7",
          "value": "平安"
        },
        {
          "id": "8",
          "value": "支付宝"
        },
        {
          "id": "9",
          "value": "微信"
        },
        {
          "id": "10",
          "value": "云闪付"
        },
        {
          "id": "11",
          "value": "浦发"
        },
        {
          "id": "12",
          "value": "华夏"
        }
      ]
    };
    }
    // 给el-select添加change事件
    
    // oldSearchBankType  存储上一次的值
    
    selectAll(val) {
            let allValues = [];
            for (const item of this.Banks) {
              allValues.push(item.value);
            }
            let oldVal = this.oldSearchBankType.length === 1 ? this.oldSearchBankType : [];
            if (val.includes('全选')) {
              console.log(allValues);
              this.Bank = allValues;
              oldVal = this.Bank;
            }
            if (this.oldSearchBankType.includes('全选') && val.includes('全选')) {
              if (val.length === 1) this.Bank = [];
              else {
                const index = val.indexOf('全选');
                val.splice(index, 1); // 排除全选选项
                this.Bank = val;
              }
              oldVal = this.Bank;
            }
            if (!this.oldSearchBankType.includes('全选') && !val.includes('全选')) {
              if (val.length === allValues.length - 1) {
                this.Bank = ['全选'].concat(val);
                oldVal = this.Bank;
              }
            }
            this.oldSearchBankType = oldVal;
          }
  • 相关阅读:
    Swift学习笔记4
    《将博客搬至CSDN》
    传入一个integer数组,取出最大、最小值
    Centos7下完美安装并配置mysql5.6
    linux常用命令总结
    centos7下安装配置redis3.0.4
    VMware下centos桥接模式静态ip配置
    解决centos7下tomcat启动正常,无法访问项目的问题
    centos7系统下安装配置jdk、tomcat教程
    Apache+Tomcat+mod_jk实现负载均衡
  • 原文地址:https://www.cnblogs.com/sloanlv/p/11127409.html
Copyright © 2020-2023  润新知