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;
}
相关推荐
一只小灿灿11 分钟前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜0523 分钟前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau1 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123451 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw01 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator1 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e1 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景1 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试常考题目详解
前端·javascript
Boilermaker19922 小时前
【Java EE】SpringIoC
前端·数据库·spring