iview Transfer 组件怎么写
时间: 2023-05-22 07:06:30 浏览: 97
感谢您的提问,iView Transfer 组件的代码可以在官方文档中找到,以下是一个简单的例子:
```
<template>
<Transfer :data="data" :target-keys="targetKeys" :render-format="render-format" @on-change="handleChange"></Transfer>
</template>
<script>
export default {
data() {
return {
data: [
{
key: '1',
label: 'Option 1'
},
{
key: '2',
label: 'Option 2'
},
{
key: '3',
label: 'Option 3'
},
{
key: '4',
label: 'Option 4'
},
{
key: '5',
label: 'Option 5'
}
],
targetKeys: [],
render-format: (item) => {
return item.label
}
}
},
methods: {
handleChange(e) {
console.log(e)
}
}
}
</script>
```
以上代码演示了一个包含了数据源 (data) 和目标数据源 (targetKeys) 的 Transfer 组件的基本用法,以及如何自定义渲染函数 (render-format) 和处理数据源变化 (handleChange)的示例。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)