element-plus/ssr-testing/cases/transfer.vue

109 lines
2.7 KiB
Vue
Raw Normal View History

<template>
<p style="text-align: center; margin: 0 0 20px">
Customize data items using render-content
</p>
<div style="text-align: center">
<el-transfer
v-model="leftValue"
style="text-align: left; display: inline-block"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="data"
@change="handleChange"
>
<template #left-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
<template #right-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
</el-transfer>
<p style="text-align: center; margin: 50px 0 20px">
Customize data items using scoped slot
</p>
<div style="text-align: center">
<el-transfer
v-model="rightValue"
style="text-align: left; display: inline-block"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="data"
@change="handleChange"
>
<template #default="{ option }">
<span>{{ option.key }} - {{ option.label }}</span>
</template>
<template #left-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
<template #right-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
</el-transfer>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { VNode, VNodeProps } from 'vue'
interface Option {
key: number
label: string
disabled: boolean
}
const generateData = (): Option[] => {
const data: Option[] = []
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${i}`,
disabled: i % 4 === 0,
})
}
return data
}
const data = ref(generateData())
const rightValue = ref([1])
const leftValue = ref([1])
const renderFunc = (
h: (type: string, props: VNodeProps | null, children?: string) => VNode,
option: Option
) => {
return h('span', null, option.label)
}
const handleChange = (
value: number | string,
direction: 'left' | 'right',
movedKeys: string[] | number[]
) => {
console.log(value, direction, movedKeys)
}
</script>
<style>
.transfer-footer {
margin-left: 15px;
padding: 6px 5px;
}
</style>