iview的穿梭框中加入列名

一：需求

想要在左右两个穿梭框中加入“用例名称、协议”两个列名，并使每一列与对应列名称对齐

二：实现方式

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>

四：实现效果