theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 新增 transfer 组件 v-model 属性 与 change 事件

Browse Source
This commit is contained in:
就眠儀式 2022-09-15 01:43:01 +08:00
parent 007b94914a
commit 30a9ed3efb
2 changed files with 68 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
package/component/src/component/transfer/index.vue
View File

@ -35,6 +35,8 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
height: "360px",
});
const emits = defineEmits(['update:modelValue','change'])
const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
const rightDataSource: Ref<any[]> = ref([]);
const _leftDataSource: Ref<any[]> = ref([...props.dataSource]);
@ -60,6 +62,29 @@ const allLeftChange = (isChecked: boolean) => {
}
};
watch(() => props.modelValue, () => {
let targetDataSource: any[] = [];
props.dataSource.forEach(ds => {
if(props.modelValue.includes(ds[props.id])) {
targetDataSource.push(ds);
}
})
leftDataSource.value = props.dataSource.filter(
(item) => !props.modelValue.includes(item[props.id])
);
_leftDataSource.value = props.dataSource.filter(
(item) => !props.modelValue.includes(item[props.id])
);
rightDataSource.value = [...targetDataSource];
_rightDataSource.value = [...targetDataSource];
}, {immediate: true})
watch(
leftSelectedKeys,
() => {
@ -118,25 +143,26 @@ watch(
);
const add = () => {
if (leftSelectedKeys.value.length === 0) {
return;
}
let targetKeys: any[] = [];
leftDataSource.value.forEach((item) => {
if (leftSelectedKeys.value.indexOf(item.id) != -1) {
rightDataSource.value.push(item);
if (leftSelectedKeys.value.indexOf(item[props.id]) != -1) {
targetKeys.push(item[props.id]);
}
});
leftDataSource.value = leftDataSource.value.filter(
(item) => leftSelectedKeys.value.indexOf(item.id) === -1
);
_leftDataSource.value.forEach((item) => {
if (leftSelectedKeys.value.indexOf(item.id) != -1) {
_rightDataSource.value.push(item);
}
});
_leftDataSource.value = _leftDataSource.value.filter(
(item) => leftSelectedKeys.value.indexOf(item.id) === -1
);
rightDataSource.value.forEach((item) => {
targetKeys.push(item[props.id]);
})
emits("change", targetKeys)
emits("update:modelValue", targetKeys)
leftSelectedKeys.value = [];
};
@ -144,22 +170,18 @@ const remove = () => {
if (rightSelectedKeys.value.length === 0) {
return;
}
let targetKeys: any[] = [];
rightDataSource.value.forEach((item) => {
if (rightSelectedKeys.value.indexOf(item.id) != -1) {
leftDataSource.value.push(item);
if (rightSelectedKeys.value.indexOf(item[props.id]) == -1) {
targetKeys.push(item[props.id]);
}
});
rightDataSource.value = rightDataSource.value.filter(
(item) => rightSelectedKeys.value.indexOf(item.id) === -1
);
_rightDataSource.value.forEach((item) => {
if (rightSelectedKeys.value.indexOf(item.id) != -1) {
_leftDataSource.value.push(item);
}
});
_rightDataSource.value = _rightDataSource.value.filter(
(item) => rightSelectedKeys.value.indexOf(item.id) === -1
);
emits("change", targetKeys)
emits("update:modelValue", targetKeys)
rightSelectedKeys.value = [];
};

26
package/document-component/src/document/zh-CN/components/transfer.md
View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-transfer` 标签, 创建穿梭框
<template>
<lay-transfer :dataSource="dataSource1"></lay-transfer>
<lay-transfer v-model="value1" :dataSource="dataSource1"></lay-transfer>
</template>
<script>
@ -22,9 +22,11 @@ import { ref } from 'vue'
export default {
setup() {
const value1 = ref(['1']);
const dataSource1 = [{id:'1', title:'易大师', disabled: true},{id:'2', title:'战争之王'}]
return {
value1,
dataSource1
}
}
@ -39,7 +41,7 @@ export default {
::: demo
<template>
<lay-transfer :dataSource="dataSource2" :title="title"></lay-transfer>
<lay-transfer v-model="value2" :dataSource="dataSource2" :title="title"></lay-transfer>
</template>
<script>
@ -48,10 +50,12 @@ import { ref } from 'vue'
export default {
setup() {
const value2 = ref([]);
const dataSource2 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
const title = ['我喜欢的','我不喜欢的']
return {
value2,
dataSource2,
title
}
@ -67,7 +71,7 @@ export default {
::: demo
<template>
<lay-transfer :dataSource="dataSource3">
<lay-transfer v-model="value3" :dataSource="dataSource3">
<template v-slot:item="{ data }">
{{data.id}}
</template>
@ -80,9 +84,11 @@ import { ref } from 'vue'
export default {
setup() {
const value3 = ref([]);
const dataSource3 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
return {
value3,
dataSource3
}
}
@ -98,7 +104,7 @@ export default {
::: demo
<template>
<lay-transfer :dataSource="dataSource5" :showSearch="true"></lay-transfer>
<lay-transfer v-model="value5" :dataSource="dataSource5" :showSearch="true"></lay-transfer>
</template>
<script>
@ -107,6 +113,7 @@ import { ref } from 'vue'
export default {
setup() {
const value5 = ref([]);
const dataSource5 = [
{id:'1', title:'无影剑'},
{id:'2', title:'逸龙剑'},
@ -118,6 +125,7 @@ export default {
]
return {
value5,
dataSource5
}
}
@ -132,7 +140,7 @@ export default {
::: demo
<template>
<lay-transfer :dataSource="dataSource4"></lay-transfer>
<lay-transfer v-model="value4" :dataSource="dataSource4"></lay-transfer>
</template>
<script>
@ -141,6 +149,8 @@ import { ref } from 'vue'
export default {
setup() {
const value4 = ref([]);
const dataSource4 = [
{id:'1', title:'无影剑'},
{id:'2', title:'逸龙剑'},
@ -169,6 +179,7 @@ export default {
]
return {
value4,
dataSource4
}
}
@ -183,7 +194,7 @@ export default {
::: demo
<template>
<lay-transfer :dataSource="dataSource5">
<lay-transfer v-model="value5" :dataSource="dataSource5">
<template v-slot:leftFooter>左侧底部</template>
<template v-slot:rightFooter>右侧底部</template>
</lay-transfer>
@ -195,6 +206,8 @@ import { ref } from 'vue'
export default {
setup() {
const value5 = ref([])
const dataSource5 = [
{id:'1', title:'无影剑'},
{id:'2', title:'逸龙剑'},
@ -206,6 +219,7 @@ export default {
]
return {
value5,
dataSource5
}
}