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;
         168px;
        height: 32px;
        .el-input__icon{
          line-height: 32px;
        }
        .el-input__inner{
           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)
      }
    },