技術標籤：jeecg-bootvue.js前端

jeecgboot作為一個開源框架，最近有所涉獵，正好有一個需求需要實現搜尋+多選的下拉元件，而jeecg中只有搜尋下拉和多選下拉元件，我們就將他們整合一下。

首先我們在components/dict這個資料夾新建一個JSearchMultiSelectTag.vue,主要是以搜尋功能為主，所以我們可以直接將JSearchSelectTag.vue裡的內容直接copy過來，再加以修改成可以多選就可以了，有幾個問題需要注意。

1 給a-select標籤加入mode="multiple"，設定可以多選的屬性，因為我這個需求資料太龐大，所以每次都讓介面返回幾條資料，不做大量資料的快取，所以沒有做同步非同步之分，源資料都是:value="selectedValue"，@change="onChange",只是懶得去改程式碼，就改成了一樣的，這裡可以根據需求自己設定

<template>
  <a-select
    v-if="async"
    mode="multiple"
    showSearch
    labelInValue
    :disabled="disabled"
    :getPopupContainer="(node) => node.parentNode"
    @search="loadData"
    :placeholder="placeholder"
    :value="selectedValue"
    style="width: 100%"
    :filterOption="false"
    @change="onChange"
    allowClear
    :notFoundContent="loading ? undefined : null"
  >
    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>

  <a-select
    v-else
    mode="multiple"
    :getPopupContainer="(node) => node.parentNode"
    showSearch
    :disabled="disabled"
    @search="loadData"
    :placeholder="placeholder"
    optionFilterProp="children"
    style="width: 100%"
    @change="onChange"
    :filterOption="false"
    :value="selectedValue"
    allowClear
    :notFoundContent="loading ? undefined : null">
    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>

</template>
 

2.我這props中的value值改為字串，我的資料儲存是用逗號作為分割符的

props:{
      disabled: Boolean,
      value: String,
      dict: String,
      dictOptions: Array,
      async: Boolean,
      placeholder:{
        type:String,
        default:"請選擇",
        required:false
      }
    },

3.監聽輸入框輸入的value時，只要val為空就賦值selectedValue為空值，有輸入值就去initSelectValue請求介面，這點是因為當刪除了所有資料時，選擇的輸入框裡沒有資料時,要將資料置空

    watch:{
      "value":{
        immediate:true,
        handler(val){
          if(!val){
              this.selectedValue=[]
              this.selectedAsyncValue=[]
          }else{
            this.initSelectValue()
          }
        }
      },
      "dict":{
        handler(){
          this.initSelectValue();
        }
      }
    },

4.methods中的初始化選擇框裡的資料的方法，資料太多，介面對返回資料條數也做了限制，所以不能查字典快取，好處就是查詢比較快，返回的資料以逗號作為分隔符分割成陣列，遍歷存到options這個陣列中,作為a-select-option中的選項

      initSelectValue(){
          getAction(`/sys/dict/loadDictItem/${this.dict}`,{key:this.value}).then(res=>{
            if(res.success){
              let valueArr = this.value.split(',')
              this.options = []
              for(let r=0;r<res.result.length;r++){
                let obj = {
                  value:valueArr[r],
                  text:res.result[r]
                }
                this.options.push(obj)
                this.selectedValue =valueArr
              }
            }
          })
}

[email protected]="onChange"，當輸入框有變化時，我們摒棄之前搜尋元件的方法，自己根據需求將已選中的資料以逗號作為分隔符以字串格式儲存起來

      onChange (selectedValue) {
        this.$emit('change', selectedValue.join(","));
      },

以上就是我將jeecgboot中的搜尋下拉元件，改為搜尋+多選的下拉元件，其他程式碼沿用，其中肯定還有一些遺漏，歡迎指教與討論。