vue的el-select標簽全選以及出現需要有禁用選項

 

首先說一下遇到這種問題的解決思路吧，很簡單先去https://element.eleme.cn/#/zh-CN 這個官網上找到對應的需求，然后就是拼接數據的問題。

以下是全選的例子：

<el-select class="fr" v-model="searchJobType" style="width: 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','TSINPUT', '01', '02', '03', '04', '05', '07', '08', '09', '11', '12'],
        oldSearchJobType: [],
        typeList: [
          {value: 'ALL_SELECT', label: '全部'},
          {value: 'TSINPUT', label: '時序數據采集任務'},
          {value: '01', label: 'RDBMS → HIVE全量'},
          {value: '02', label: 'RDBMS → HDFS全量'},
          {value: '03', label: 'RDBMS → HBASE全量'},
          {value: '04', label: 'HDFS → RDBMS'},
          {value: '05', label: 'HIVE  → RDBMS'},
          {value: '07', label: 'RDBMS → HIVE增量'},
          {value: '08', label: 'RDBMS → HBASE增量'},
          {value: '09', label: '文件 → RDBMS'},
          {value: '11', label: '數據對象 → 數據對象'},
          {value: '12', label: 'FTP服務器 → 文件系統'},
        ]
      }
    },
    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')
原文鏈接：https://www.cnblogs.com/zhenggaowei/p/9828364.html

有時候還會遇到一種情況，有時候可能會根據某種條件導致不能選擇某一個選項，就需要有禁用項。以下網站可參考的代碼。

在el-option中，設定disabled值為 true，即可禁用該選項 <template>
  <el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶',
          disabled: true
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

個人代碼列子，我的工作需求是這樣的。首先要選擇分行進行工單推送，因為分行較多，所以很有可能這次推送了，下次再進行推送的又選中該分行了，這樣就會造成該分行數據錯亂問題，所以就需要有一個判斷，已經推送的就顯示為禁用項。

前台代碼：

<el-select @change="changeBank()" v-model="bankIdList" multiple size="small" collapse-tags style="margin-left: 20px;"
                       placeholder="請選擇分行（可多選）">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled">
              </el-option>
            </el-select>

// 加載所有分行
loadAllBranch() {
  console.log(1);
  this.utils.post(this,'allBranchForVue.do',{orderId:this.wo_id},d=>{
    console.log(d);
    this.options = d;
  });
},

后台代碼：

　　 String orderId = request.getParameter("orderId");
    List<WorkOrder> wList = null;
    if(StringUtils.isNoneBlank(orderId)){
        wList  =  workOrderService.getnameSXBybossID(orderId);  //獲取已經推送的分行信息
    }

    UserModel u = AuthUtil.getLoginUser(request);
    //List<OrgModel> list = orgService.getAllBranch(u.getId());
    List<OrgModel> list = orgService.getAllBranchForVue();  //獲取所有分行
    JSONArray json = new JSONArray();
    for (OrgModel om: list) {
        JSONObject jsonObject=new JSONObject();
        jsonObject.put("id",om.getId());
        jsonObject.put("name",om.getName());
        jsonObject.put("nameSX",om.getNameSX());
        jsonObject.put("parent",om.getParent());

        //QCQ20190712 判斷是否已推送 已推送變灰色不可選 此功能暫時屏蔽
        /*if(!wList.isEmpty() && StringUtils.isNoneBlank(om.getNameSX())){
            for (WorkOrder wo: wList) {
                if(wo.getWorkOrderId().contains(om.getNameSX())){
                    jsonObject.put("name",om.getName() + "  (已推送)");
                    jsonObject.put("disabled",true);
                }
            }
        }*/
        json.add(jsonObject);
    }
try {
    response.getWriter().write(json.toString()); // 將JSON數據返回頁面
} catch (Exception e) {
    e.printStackTrace();
}