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

fixed bug of Transfer when no slot

Browse source 
fixed bug of Transfer when no slot
This commit is contained in:
梁灏 2017-03-15 18:56:37 +08:00
parent 7c2ed52c61
commit 84a8a413aa
3 changed files with 79 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/routers/form.vue
View file

@ -11,7 +11,7 @@
<Form-item prop="user"> <Form-item prop="user">
<Input v-model="formInline.user"></Input> <Input v-model="formInline.user"></Input>
</Form-item> </Form-item>
<Form-item> <Form-item prop="targetKeys1">
<Transfer <Transfer
:data="formInline.data1" :data="formInline.data1"
:target-keys="formInline.targetKeys1" :target-keys="formInline.targetKeys1"

152
examples/routers/transfer.vue
View file

@ -1,77 +1,19 @@
<!--<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> <template>
<Transfer <div>
:data="data3" <Transfer
:target-keys="targetKeys3" :data="data1"
:list-style="listStyle" filterable
:render-format="render3" :target-keys="targetKeys1"
:operations="['向左移动','向右移动']" :render-format="render1"
filterable @on-change="handleChange1"></Transfer>
@on-change="handleChange3"> </div>
<div :style="{float: 'right', margin: '5px'}">
<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>
</div>
</Transfer>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data3: this.getMockData(), data1: this.getMockData(),
targetKeys3: this.getTargetKeys(), targetKeys1: this.getTargetKeys()
listStyle: {
width: '250px',
height: '300px'
}
} }
}, },
methods: { methods: {
@ -92,20 +34,78 @@
.filter(() => Math.random() * 2 > 1) .filter(() => Math.random() * 2 > 1)
.map(item => item.key); .map(item => item.key);
}, },
handleChange3 (newTargetKeys) { render1 (item) {
this.targetKeys3 = newTargetKeys; return item.label;
}, },
render3 (item) { handleChange1 (newTargetKeys, direction, moveKeys) {
return item.label + ' - ' + item.description; console.log(newTargetKeys);
}, console.log(direction);
reloadMockData () { console.log(moveKeys);
this.data3 = this.getMockData(); this.targetKeys1 = newTargetKeys;
this.targetKeys3 = this.getTargetKeys();
} }
} }
} }
</script> </script>
<!--<template>-->
<!--<Transfer-->
<!--:data="data3"-->
<!--:target-keys="targetKeys3"-->
<!--:list-style="listStyle"-->
<!--:render-format="render3"-->
<!--:operations="['向左移动','向右移动']"-->
<!--filterable-->
<!--@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 {-->
<!--data3: this.getMockData(),-->
<!--targetKeys3: this.getTargetKeys(),-->
<!--listStyle: {-->
<!--width: '250px',-->
<!--height: '300px'-->
<!--}-->
<!--}-->
<!--},-->
<!--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);-->
<!--},-->
<!--handleChange3 (newTargetKeys) {-->
<!--this.targetKeys3 = newTargetKeys;-->
<!--},-->
<!--render3 (item) {-->
<!--return item.label + ' - ' + item.description;-->
<!--},-->
<!--reloadMockData () {-->
<!--this.data3 = this.getMockData();-->
<!--this.targetKeys3 = this.getTargetKeys();-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>--> <!--<template>-->
<!--<Transfer--> <!--<Transfer-->
<!--:data="data4"--> <!--:data="data4"-->

4
src/components/transfer/transfer.vue
View file

@ -67,8 +67,8 @@
return cloned; return cloned;
} }
const vNodes = this.$slots.default; const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
const clonedVNodes = vNodes.map(vnode => cloneVNode(vnode)); const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
return createElement('div', { return createElement('div', {
'class': this.classes 'class': this.classes