iview 穿梭框想设置多列？

Z时代
2024-02-16
分类：IT

iview 穿梭框想设置多列
iview 穿梭框想设置多列？
使用render-format 就报错

使用官网示例也报一样的错

想要实现这样的
iview 穿梭框想设置多列？

代码

<template>
  <div>
    <Transfer
      :data='sourceList'
      :target-keys='targetKeys'
      filterable
      :titles='["可选用例", "已选用例"]'
      :list-style='listStyle'
      :operations='["left", "right"]'
      :render-format="render"
    >
      <div class="list-title">
        <span class="span">用例名称</span>
        <span class="span">协议</span>
        <span class="span">操作</span>
      </div>
    </Transfer>
    <br>
  </div>
</template>
<script lang="js">
export default {
  components: {
  },
  name: 'TestMyCus',
  data () {
    return {
      // 源用例数组【注意：key是string类型的】
      sourceList: [
        {key: '1', name: '名称1', protocol: '协议1', disabled: false},
        {key: '2', name: '名称2', protocol: '协议2', disabled: false},
        {key: '3', name: '名称3', protocol: '协议3', disabled: false}
      ],
      targetKeys: ['1', '2'],
      listStyle: {
        width: '300px',
        height: '300px'
      }
    }
  },
  methods: {
    render (item) {
      console.log(item)
      return ' <Tooltip content="+item.key+">\n' +
        item.name +
        '    </Tooltip>'
    },
    handleChange1 (newTargetKeys) {
      this.targetKeys = newTargetKeys
    }
  }
}
</script>
<style scoped>
 /deep/ .ivu-transfer .ivu-transfer-list-body {
  padding-top: 62px;
}
 /deep/ .ivu-transfer .ivu-transfer-list-footer {
  padding: 8px;
  position: relative;
  top: -200px;
  border: none;
}
/deep/ .ivu-transfer .case-name {
  display: inline;
  width: 164px;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 /deep/ .list-title {
  margin-left: 50px;
}
/deep/ .list-title .span  {
  display: inline;
  width: 50%;
  color: rgba(0, 0, 0, 0.45);
}</style>