This commit is contained in:
梁灏 2017-04-01 11:21:35 +08:00
parent 48af13599c
commit 8fbc8c7191
2 changed files with 127 additions and 48 deletions

View file

@ -1,51 +1,51 @@
<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>-->
<!--<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>-->
@ -148,3 +148,79 @@
<!--}-->
<!--}-->
<!--</script>-->
<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()
}
},
created(){
console.log('--created--');
this.fetch();
},
methods: {
fetch() {
const _this = this;
setTimeout(function() {
console.log('--1');
// _this.data1 = null;
_this.data1 = _this.getMockData1();
console.log('-fetch-', _this.data1);
}, 1500);
},
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;
},
getMockData1 () {
let mockData = [];
for (let i = 1; i <= 20; i++) {
mockData.push({
key: i.toString(),
label: '内容11111' + i,
description: '内容11111 ' + i + ' 1111的描述信息',
// 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>

View file

@ -244,6 +244,9 @@
watch: {
targetKeys () {
this.splitData(false);
},
data () {
this.splitData(false);
}
},
created () {