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) } },