iview穿梭框怎么写
时间: 2023-05-23 10:02:45 浏览: 203
iview的穿梭框可以使用 Transfer 组件实现,具体代码如下:
<template>
<Transfer
:data="data"
:target-keys="targetKeys"
:render-format="renderFormat"
@on-change="handleChange"
/>
</template>
<script>
import { Transfer } from 'iview'
export default {
data () {
return {
data: [
{
key: '1',
title: '选项1',
description: '选项1的描述信息'
},
{
key: '2',
title: '选项2',
description: '选项2的描述信息'
},
{
key: '3',
title: '选项3',
description: '选项3的描述信息'
}
],
targetKeys: [],
renderFormat: ({ title, description }) => `${title} - ${description}`
}
},
components: {
Transfer
},
methods: {
handleChange (targetKeys) {
this.targetKeys = targetKeys
}
}
}
</script>
阅读全文