update Transfer icons
This commit is contained in:
parent
99f6640559
commit
a61acfdcb7
4 changed files with 38 additions and 19 deletions
|
@ -1,16 +1,27 @@
|
|||
<template>
|
||||
<Transfer
|
||||
:data="data1"
|
||||
:target-keys="targetKeys1"
|
||||
:render-format="render1"
|
||||
@on-change="handleChange1"></Transfer>
|
||||
:data="data3"
|
||||
:target-keys="targetKeys3"
|
||||
:list-style="listStyle"
|
||||
:render-format="render3"
|
||||
:operations="['To left','To right']"
|
||||
filterable
|
||||
@on-change="handleChange3">
|
||||
<div :style="{float: 'right', margin: '5px'}">
|
||||
<Button type="ghost" size="small" @click="reloadMockData">Refresh</Button>
|
||||
</div>
|
||||
</Transfer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data1: this.getMockData(),
|
||||
targetKeys1: this.getTargetKeys()
|
||||
data3: this.getMockData(),
|
||||
targetKeys3: this.getTargetKeys(),
|
||||
listStyle: {
|
||||
width: '250px',
|
||||
height: '300px'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -19,8 +30,8 @@
|
|||
for (let i = 1; i <= 20; i++) {
|
||||
mockData.push({
|
||||
key: i.toString(),
|
||||
label: '内容' + i,
|
||||
description: '内容' + i + '的描述信息',
|
||||
label: 'Content ' + i,
|
||||
description: 'The desc of content ' + i,
|
||||
disabled: Math.random() * 3 < 1
|
||||
});
|
||||
}
|
||||
|
@ -31,14 +42,15 @@
|
|||
.filter(() => Math.random() * 2 > 1)
|
||||
.map(item => item.key);
|
||||
},
|
||||
render1 (item) {
|
||||
return item.label;
|
||||
handleChange3 (newTargetKeys) {
|
||||
this.targetKeys3 = newTargetKeys;
|
||||
},
|
||||
handleChange1 (newTargetKeys, direction, moveKeys) {
|
||||
console.log(newTargetKeys);
|
||||
console.log(direction);
|
||||
console.log(moveKeys);
|
||||
this.targetKeys1 = newTargetKeys;
|
||||
render3 (item) {
|
||||
return item.label + ' - ' + item.description;
|
||||
},
|
||||
reloadMockData () {
|
||||
this.data3 = this.getMockData();
|
||||
this.targetKeys3 = this.getTargetKeys();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue