update Transfer
This commit is contained in:
梁灏
parent
228c87cd3b
commit
7479854b36
2 changed files with 13 additions and 196 deletions
|
|
@ -1,188 +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>-->
|
|
||||||
<!--<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>-->
|
|
||||||
<!--<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>-->
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
|
||||||
<Transfer
|
<Transfer
|
||||||
:data="data1"
|
:data="data1"
|
||||||
filterable
|
|
||||||
:target-keys="targetKeys1"
|
:target-keys="targetKeys1"
|
||||||
:render-format="render1"
|
:render-format="render1"
|
||||||
@on-change="handleChange1"></Transfer>
|
@on-change="handleChange1"></Transfer>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
data1: [] || this.getMockData(),
|
data1: this.getMockData(),
|
||||||
targetKeys1: this.getTargetKeys()
|
targetKeys1: this.getTargetKeys()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
|
||||||
console.log('--created--');
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
const _this = this;
|
|
||||||
setTimeout(function() {
|
|
||||||
console.log('--1');
|
|
||||||
// _this.data1 = null;
|
|
||||||
// _this.data1 = _this.getMockData1();
|
|
||||||
console.log('-fetch-', _this.data1);
|
|
||||||
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
getMockData () {
|
getMockData () {
|
||||||
let mockData = [];
|
let mockData = [];
|
||||||
for (let i = 1; i <= 20; i++) {
|
for (let i = 1; i <= 20; i++) {
|
||||||
|
|
@ -195,18 +26,6 @@
|
||||||
}
|
}
|
||||||
return mockData;
|
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 () {
|
getTargetKeys () {
|
||||||
return this.getMockData()
|
return this.getMockData()
|
||||||
.filter(() => Math.random() * 2 > 1)
|
.filter(() => Math.random() * 2 > 1)
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,11 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'Transfer',
|
name: 'Transfer',
|
||||||
mixins: [ Emitter, Locale ],
|
mixins: [ Emitter, Locale ],
|
||||||
render (createElement) {
|
render (h) {
|
||||||
|
|
||||||
function cloneVNode (vnode) {
|
function cloneVNode (vnode) {
|
||||||
const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode));
|
const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode));
|
||||||
const cloned = createElement(vnode.tag, vnode.data, clonedChildren);
|
const cloned = h(vnode.tag, vnode.data, clonedChildren);
|
||||||
cloned.text = vnode.text;
|
cloned.text = vnode.text;
|
||||||
cloned.isComment = vnode.isComment;
|
cloned.isComment = vnode.isComment;
|
||||||
cloned.componentOptions = vnode.componentOptions;
|
cloned.componentOptions = vnode.componentOptions;
|
||||||
|
|
@ -29,10 +29,10 @@
|
||||||
const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
|
const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
|
||||||
const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
|
const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
|
||||||
|
|
||||||
return createElement('div', {
|
return h('div', {
|
||||||
'class': this.classes
|
'class': this.classes
|
||||||
}, [
|
}, [
|
||||||
createElement('List', {
|
h(List, {
|
||||||
ref: 'left',
|
ref: 'left',
|
||||||
props: {
|
props: {
|
||||||
prefixCls: this.prefixCls + '-list',
|
prefixCls: this.prefixCls + '-list',
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
}
|
}
|
||||||
}, vNodes),
|
}, vNodes),
|
||||||
|
|
||||||
createElement('Operation', {
|
h(Operation, {
|
||||||
props: {
|
props: {
|
||||||
prefixCls: this.prefixCls,
|
prefixCls: this.prefixCls,
|
||||||
operations: this.operations,
|
operations: this.operations,
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
createElement('List', {
|
h(List, {
|
||||||
ref: 'right',
|
ref: 'right',
|
||||||
props: {
|
props: {
|
||||||
prefixCls: this.prefixCls + '-list',
|
prefixCls: this.prefixCls + '-list',
|
||||||
|
|
@ -82,8 +82,6 @@
|
||||||
}, clonedVNodes)
|
}, clonedVNodes)
|
||||||
]);
|
]);
|
||||||
},
|
},
|
||||||
|
|
||||||
components: { List, Operation },
|
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue