当前位置：首页 > news >正文

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

news 2025/7/9 13:34:28

一、template/

组件代码

  <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-transferfilterable: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>

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

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

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

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

/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;
}