mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-09 06:37:41 +08:00
575835a2f8
* docs(components): use `script setup` replace `defineComponent` * docs(components): use setup sugar simplify `checkbox` demo * docs(components): use setup sugar simplify `collapse` demo * docs(components): use setup sugar simplify `color-picker` demo * docs(components): use setup sugar simplify `config-provider` demo * docs(components): use setup sugar simplify `container` demo * docs(components): use setup sugar simplify `date-picker` demo * docs(components): use setup sugar simplify `datetime-picker` demo * docs(components): use setup sugar simplify `dialog` demo * docs(components): use setup sugar simplify `drawer` demo * docs(components): use setup sugar simplify `dropdown` demo * docs(components): use setup sugar simplify `image` demo * docs(components): use setup sugar simplify `infinite-scroll` demo * docs(components): use setup sugar simplify `input-number` demo * docs(components): use setup sugar simplify `loading` demo * docs(components): use setup sugar simplify `menu` demo * docs(components): use setup sugar simplify `message` demo * docs(components): use setup sugar simplify `message-box` demo * docs(components): use setup sugar simplify `notification` demo * docs(components): use setup sugar simplify `page-header` demo * docs(components): use setup sugar simplify `pagination` demo * docs(components): use setup sugar simplify `popover` demo * docs(components): use setup sugar simplify `progress` demo * docs(components): use setup sugar simplify `radio` demo * docs(components): use setup sugar simplify `rate` demo * docs(components): use setup sugar simplify `scrollbar` demo * docs(components): use setup sugar simplify `select` demo * docs(components): use setup sugar simplify `select-v2` demo * docs(components): use setup sugar simplify `skeleton` demo * docs(components): use setup sugar simplify `slider` demo * docs(components): use setup sugar simplify `space` demo * docs(components): use setup sugar simplify `step` demo * docs(components): use setup sugar simplify `switch` demo * docs(components): use setup sugar simplify `tabs` demo * docs(components): use setup sugar simplify `tag` demo * docs(components): use setup sugar simplify `time-picker` demo * docs(components): use setup sugar simplify `time-select` demo * docs(components): use setup sugar simplify `timeline` demo * docs(components): use setup sugar simplify `tooltip` demo * docs(components): use setup sugar simplify `transfer` demo * docs(components): use setup sugar simplify `transition` demo * docs(components): use setup sugar simplify `tree` demo * docs(components): use setup sugar simplify `table` demo * docs(components): Escape character * docs(components): use setup sugar simplify `tree-v2` demo * docs(components): use setup sugar simplify `upload` demo * docs(components): use `ref` to replace `reactive` * docs(ci): use `playground` to replace `codepen` * docs(ci): change icon from `codepen` to `ep` * docs(components): `sass` to `css` * fix(components): add button CssVar * docs(ci): change `Edit in Codepen.io` to `Edit in Playground` * docs(ci): add vitepress i18
109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<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: 20px;
|
|
padding: 6px 5px;
|
|
}
|
|
</style>
|