82 lines
1.6 KiB
Markdown
82 lines
1.6 KiB
Markdown
<cn>
|
|
#### 高级用法
|
|
穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Advanced
|
|
You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<a-transfer
|
|
:dataSource="mockData"
|
|
showSearch
|
|
:listStyle="{
|
|
width: '250px',
|
|
height: '300px',
|
|
}"
|
|
:operations="['to right', 'to left']"
|
|
:targetKeys="targetKeys"
|
|
@change="handleChange"
|
|
:render="item=>`${item.title}-${item.description}`"
|
|
>
|
|
<a-button
|
|
size="small"
|
|
style="float:right;margin: 5px"
|
|
@click="getMock"
|
|
slot="footer"
|
|
slot-scope="props"
|
|
>
|
|
reload
|
|
</a-button>
|
|
<span
|
|
slot="notFoundContent"
|
|
>
|
|
没数据
|
|
</span>
|
|
</a-transfer>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
mockData: [],
|
|
targetKeys: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getMock()
|
|
},
|
|
methods: {
|
|
getMock() {
|
|
const targetKeys = [];
|
|
const mockData = [];
|
|
for (let i = 0; i < 20; i++) {
|
|
const data = {
|
|
key: i.toString(),
|
|
title: `content${i + 1}`,
|
|
description: `description of content${i + 1}`,
|
|
chosen: Math.random() * 2 > 1,
|
|
};
|
|
if (data.chosen) {
|
|
targetKeys.push(data.key);
|
|
}
|
|
mockData.push(data);
|
|
}
|
|
this.mockData = mockData
|
|
this.targetKeys = targetKeys
|
|
},
|
|
handleChange(targetKeys, direction, moveKeys) {
|
|
console.log(targetKeys, direction, moveKeys);
|
|
this.targetKeys = targetKeys
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
```
|
|
|
|
|
|
|