VUE 带有搜索功能的穿梭框（简单demo）

一、template/

组件代码

c 复制代码

  <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" class="custom-dialog-line" >
    <div style="text-align: center ; width: 100%; height: 450px;">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入搜索名称"
        v-model="valueList"
        @change="handleChange"
        :data="lineData">
        <el-button class="transfer-footer" slot="right-footer" size="small" @click="conformsLine">确定</el-button>
      </el-transfer>
    </div>
  </el-dialog>

c 复制代码

data(){
    return {
      lineData:[],
      dialogVisible: false,
      title: '申请审批单-变更',
      valueList: [],
      filterMethod(query, item) {
        return item.cityLine.indexOf(query) > -1;
      },
      cities: [], 
      cityLine: [], 
    }
  },

穿梭框数据可定义在前端也可由后端接口获取，以下示例为后端接口获取

cities: \[\],

cityLine: \[\],

c 复制代码

searchStationInfo(){
  this.lineData = [];
  let param = {lineName: this.lineName} // 过滤条件
  queryStation(param).then(res=>{
    if(res.code === '200'){
      this.cities = res.data.nameList;
      this.cityLine = res.data.lineList;
      this.cities.forEach((city, index) => {
        this.lineData.push({
          label: city,
          key: index,
          cityLine: this.cityLine[index]
        });
      });
    }
  })
},
handleChange(value, direction, movedKeys) {
// 此处可处理被刷选的数据逻辑。
},
handleClose(){
  this.$emit("close", false);
},

补充组件样式：样式示例，可自行调整

c 复制代码

/deep/ .el-transfer-panel {
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    overflow: hidden;
    background: #FFF;
    display: inline-block;
    vertical-align: middle;
    width: 372px;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
}
/deep/ .el-transfer-panel__list.is-filterable {
    width: 90%;
    height: 202px;
    padding-top: 0;
}
/deep/ .el-transfer-panel__item.el-checkbox .el-checkbox__label {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    box-sizing: border-box;
    padding-left: 24px;
    line-height: 30px;
}
/deep/ .el-checkbox {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin-right: 30px;
    width: 300px;
}
/deep/ .el-transfer-panel__item.el-checkbox .el-checkbox__label {
    width: 315px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    box-sizing: border-box;
    padding-left: 24px;
    line-height: 30px;
}
/deep/ .el-checkbox-group {
  text-align: left;
}
 
 
/deep/ .el-checkbox {
  margin-left: 15px;
  margin-right: 25px;
  width: 240px;
  padding-left: 0px;
  text-align: left;  //这个很关键，否则每一行都是居中状态
}
/deep/ .el-transfer-panel__list.is-filterable {
    width: 90%;
    height: 249px;
    padding-top: 0;
}
/deep/  .el-transfer-panel__body{
    height: 350px;
}