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>
|
||||
<div>
|
||||
<Transfer
|
||||
:data="data1"
|
||||
filterable
|
||||
:target-keys="targetKeys1"
|
||||
:render-format="render1"
|
||||
@on-change="handleChange1"></Transfer>
|
||||
</div>
|
||||
<Transfer
|
||||
:data="data1"
|
||||
:target-keys="targetKeys1"
|
||||
:render-format="render1"
|
||||
@on-change="handleChange1"></Transfer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data1: [] || this.getMockData(),
|
||||
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++) {
|
||||
|
|
@ -195,18 +26,6 @@
|
|||
}
|
||||
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)
|
||||
|
|
@ -223,4 +42,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
export default {
|
||||
name: 'Transfer',
|
||||
mixins: [ Emitter, Locale ],
|
||||
render (createElement) {
|
||||
render (h) {
|
||||
|
||||
function 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.isComment = vnode.isComment;
|
||||
cloned.componentOptions = vnode.componentOptions;
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
const vNodes = this.$slots.default === undefined ? [] : this.$slots.default;
|
||||
const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode));
|
||||
|
||||
return createElement('div', {
|
||||
return h('div', {
|
||||
'class': this.classes
|
||||
}, [
|
||||
createElement('List', {
|
||||
h(List, {
|
||||
ref: 'left',
|
||||
props: {
|
||||
prefixCls: this.prefixCls + '-list',
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
}, vNodes),
|
||||
|
||||
createElement('Operation', {
|
||||
h(Operation, {
|
||||
props: {
|
||||
prefixCls: this.prefixCls,
|
||||
operations: this.operations,
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
}),
|
||||
|
||||
createElement('List', {
|
||||
h(List, {
|
||||
ref: 'right',
|
||||
props: {
|
||||
prefixCls: this.prefixCls + '-list',
|
||||
|
|
@ -82,8 +82,6 @@
|
|||
}, clonedVNodes)
|
||||
]);
|
||||
},
|
||||
|
||||
components: { List, Operation },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue