zoukankan      html  css  js  c++  java
  • 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;
          }
  • 相关阅读:
    The first appliaction for "Hello World!"
    zone
    learn to study
    深入理解 Angular 2 变化监测和 ngZone
    看看吧
    生命周期钩子
    一个简单的todo
    依赖注入
    @Output()
    @Input
  • 原文地址:https://www.cnblogs.com/sloanlv/p/11127409.html
Copyright © 2011-2022 走看看