element-ui 穿梭框使用axios數據查詢

需求：使用element-ui的穿梭框，發送ajax向服務器查詢數據，我這里以查詢姓名為例子

由於穿梭框自己的那個搜索框並不滿足我們要達到的條件，所以我自己寫了一個輸入框input去覆蓋在原來的搜索框上面，當每次用戶輸入的時候，就拿到用戶輸入的內容傳遞給后端去查詢，最后在顯示出來

option.realName是姓名，option.loginId是工號，可在<span slot-scope="{ option }">{{ option.realName || '' }} - 工號： {{ option.loginId || '' }}</span> 根據自己的需求顯示結果

html部分

    <div style="text-align: center" class="el-transfers">
        <el-transfer style="text-align: left; display: inline-block" v-model="value4" :props='propss' //數據源的字段別名 :titles="['待選人員', '已選人員']" :button-texts="['移除', '添加']" :format="{
        noChecked: '${total}', hasChecked: '${checked}/${total}' }"           @change="handleChange" :data="data" //Transfer 的數據源
        > 
          <span slot-scope="{ option }">{{ option.realName || '' }} - 工號： {{ option.loginId || '' }}</span>
        </el-transfer>
        <el-input class="search" @input="querySearchAsyncs()" placeholder="請輸入搜索姓名" prefix-icon="el-icon-search" v-model="input"> </el-input>
     </div>

css部分：

   .el-transfers{ position: relative; .search{ position: absolute; top: 56px; left: 16px; z-index: 999; width: 168px; height: 32px; .el-input__icon{ line-height: 32px; } .el-input__inner{ width: 168px; height: 32px; border-radius: 16px; } } }

 

data部分：

propss:{ key:'id', label:"realName" }, data: [], input:'', value4:'',
newArray:[]

js部分：

 handleChange(username, direction, movedKeys){ // username點擊添加到右邊框的數據 //初始化
      this.addUser = username;//這是一個id數組 // 根據添加到右手邊的id去data總數據里面找到這條數據，把它拷貝一份到一個新的數組中去
      for(let i=0;i<this.addUser.length;i++){ for(let n=0;n<this.data.length;n++){ if(this.addUser[i] == this.data[n].id){ this.newArray.push(this.data[n]) //用一個新的數組裝起來，當我清空搜索框輸入內容，進行它搜索時，需要把以前添加在右邊的數據（newArray）重新放回到data里面去
 } } } },

querySearchAsyncs() { if(this.input != ""){ setTimeout(()=>{ this.$axios.post('/admin/permission/administrator/user/list',{ userId: this.tool.getCookie("userId"), sessionId: this.tool.getCookie("sessionId"), sql: { fields:"id,loginId,realName", current: 1, //當前第幾頁 
              pageSize:100, //一次性拿到100條數據
 searches: { realName:this.input, //這是我傳給后端需要查詢的名字
 } } }).then(res=>{ if(res.errorCode == 200){ this.data = res.result.data //后端給我一百條數據對象，首先先放在data里面顯示出來 //如果newArray里面有數據，遍歷之前添加到右邊的所有數據，追加到總數的后面
              this.newArray.forEach((e)=>{ this.data.push(e) }) //將this.data里面的數據去重
              let data = this.data // 根據id去重
              var arr1=data.filter(function(element,index,self){ return self.findIndex(el=>el.id==element.id)===index }) // 把去從后的數據重新賦值給穿梭框
              this.data = arr1 } }) },1000) } },