一:需求
想要在左右两个穿梭框中加入“用例名称、协议”两个列名,并使每一列与对应列名称对齐
二:实现方式
1.html:借助 Transfer Slots
加入内容
<Transfer
:data='sourceList'
:target-keys='targetKeys'
filterable
:render-format='render'
:titles='["可选用例", "已选用例"]'
:list-style='listStyle'
@on-change='handleChange'
>
<div class='list-title'>
<span>用例名称</span>
<span>协议</span>
</div>
</Transfer>
2.js:使用 render-format
可以自己组合出需要的数据格式。
data () {
return {
// 源用例数组【注意:key是string类型的】
sourceList: [
{ key: '1', name: '名称1', protocol: '协议1', disabled: false },
{ key: '2', name: '名称2', protocol: '协议2', disabled: true },
{ key: '3', name: '名称3', protocol: '协议3', disabled: false },
],
targetKeys: ['1', '2'], // 已选用例
listStyle: {
width: '388px',
height: '300px',
},
}
},
methods: {
render (item) {
return `<span class="case-name" :title="item.name">${item.name}</span><span>${item.protocol}</span>`
},
handleChange (newTargetKeys) {
this.targetKeys = newTargetKeys
},
},
3.style:把 .ivu-transfer-list-footer
底部内容提升至列表上方
<style lang="scss" scoped>
::v-deep.ivu-transfer {
//主内容
.ivu-transfer-list-body {
padding-top: 62px;
}
//列表名称(由底部按钮修改)
.ivu-transfer-list-footer {
padding: 8px;
position: relative;
top: -200px;
border: none;
}
// 列的样式
.case-name {
display: inline-block;
width: 164px;
padding-right: 10px;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
}
.list-title {
margin-left: 50px;
span {
display: inline-block;
width: 50%;
color: rgba(0, 0, 0, 0.45);
}
}
</style>