drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Transfer

Browse source 
support Transfer
This commit is contained in:
梁灏 2017-03-07 15:06:38 +08:00
parent 191068ac0c
commit 5b19b5f55f
8 changed files with 198 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

133
examples/routers/transfer.vue
View file

@ -1,18 +1,77 @@
<!--<template>-->
<!--<div>-->
<!--<Transfer-->
<!--:data="data1"-->
<!--filterable-->
<!--:target-keys="targetKeys1"-->
<!--:render-format="render1"-->
<!--@on-change="handleChange1"></Transfer>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data1: this.getMockData(),-->
<!--targetKeys1: this.getTargetKeys()-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--getMockData () {-->
<!--let mockData = [];-->
<!--for (let i = 1; i <= 20; i++) {-->
<!--mockData.push({-->
<!--key: i.toString(),-->
<!--label: '内容' + i,-->
<!--description: '内容' + i + '的描述信息',-->
<!--disabled: Math.random() * 3 < 1-->
<!--});-->
<!--}-->
<!--return mockData;-->
<!--},-->
<!--getTargetKeys () {-->
<!--return this.getMockData()-->
<!--.filter(() => Math.random() * 2 > 1)-->
<!--.map(item => item.key);-->
<!--},-->
<!--render1 (item) {-->
<!--return item.label;-->
<!--},-->
<!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
<!--console.log(newTargetKeys);-->
<!--console.log(direction);-->
<!--console.log(moveKeys);-->
<!--this.targetKeys1 = newTargetKeys;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Transfer
:data="data2"
:target-keys="targetKeys2"
:data="data3"
:target-keys="targetKeys3"
:list-style="listStyle"
:render-format="render3"
:operations="['向左移动','向右移动']"
filterable
:render-format="rf"
:filter-method="filterMethod"
@on-change="handleChange2"></Transfer>
@on-change="handleChange3">
<div :style="{float: 'right', margin: '5px'}">
<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>
</div>
</Transfer>
</template>
<script>
export default {
data () {
return {
data2: this.getMockData(),
targetKeys2: this.getTargetKeys()
data3: this.getMockData(),
targetKeys3: this.getTargetKeys(),
listStyle: {
width: '250px',
height: '300px'
}
}
},
methods: {
@ -30,18 +89,62 @@
},
getTargetKeys () {
return this.getMockData()
.filter(() => Math.random() * 2 > 1)
.map(item => item.key);
.filter(() => Math.random() * 2 > 1)
.map(item => item.key);
},
handleChange2 (newTargetKeys) {
this.targetKeys2 = newTargetKeys;
handleChange3 (newTargetKeys) {
this.targetKeys3 = newTargetKeys;
},
filterMethod (data, query) {
return data.label.indexOf(query) > -1;
render3 (item) {
return item.label + ' - ' + item.description;
},
rf (data) {
return '<i class="ivu-icon ivu-icon-alert"></i>' + data.label;
reloadMockData () {
this.data3 = this.getMockData();
this.targetKeys3 = this.getTargetKeys();
}
}
}
</script>
<!--<template>-->
<!--<Transfer-->
<!--:data="data4"-->
<!--:target-keys="targetKeys4"-->
<!--:render-format="render4"-->
<!--@on-change="handleChange4"></Transfer>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data4: this.getMockData(),-->
<!--targetKeys4: this.getTargetKeys()-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--getMockData () {-->
<!--let mockData = [];-->
<!--for (let i = 1; i <= 20; i++) {-->
<!--mockData.push({-->
<!--key: i.toString(),-->
<!--label: '内容' + i,-->
<!--description: '内容' + i + '的描述信息',-->
<!--disabled: Math.random() * 3 < 1-->
<!--});-->
<!--}-->
<!--return mockData;-->
<!--},-->
<!--getTargetKeys () {-->
<!--return this.getMockData()-->
<!--.filter(() => Math.random() * 2 > 1)-->
<!--.map(item => item.key);-->
<!--},-->
<!--handleChange4 (newTargetKeys) {-->
<!--this.targetKeys4 = newTargetKeys;-->
<!--},-->
<!--render4 (item) {-->
<!--return item.label + ' - ' + item.description;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->