利用Element UI 修改穿梭框的按钮样式
//html部分
<el-transfer
v-model="FirsttransferVal"
filterable
:filter-method="filterMethod"
filter-placeholder="请输入指标名称"
:titles="['待选指标', '已选指标']"
:button-texts="['删除','添加']"
@change="handleChange"
:props="{key: 'tagName',label: 'tagName'}"
:data="transferData">
</el-transfer>
//Js部分
export default {
data() { return {filterMethod(query, item) {
return item.tagName.indexOf(query) > -1;
},
transferData: [
{
id: "1",
key: 1,
tagName: "指标1",
value: "10",
},
{
id: "2",
key: 2,
tagName: "指标2",
value: "20",
},
],
FirsttransferVal: [],
}
}
methods: {
handleChange(value, direction, movedKeys) {
console.log(value);
},
}
// CSS样式
<style scoped>
/deep/ .custonStyle .el-dialog__body {
border-top: 1px solid #ccc;
}
/deep/ .el-transfer {
display: flex;
}
/deep/ .el-button+.el-button{margin-left: 0px;}
/deep/ .el-button [class*=el-icon-]+span{margin-left: 0px;}
/deep/ .el-transfer__buttons {
margin-top: 100px;
display: block;
}
/deep/ .el-transfer__buttons .is-with-texts {
height: 40px;
display: block;
line-height: 40px;
padding: 0 20px;
}
</style>
