forked from opentiny/tiny-vue
61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<header>字段映射</header>
|
|
<tiny-transfer v-model="value" :data="data" :props="{ key: 'id', label: 'text' }"></tiny-transfer>
|
|
<header>使用插槽</header>
|
|
<tiny-transfer v-model="value" :data="data" :props="{ key: 'id', label: 'text' }">
|
|
<template #default="optionData">
|
|
<div>
|
|
<span class="red">{{ optionData.option.id }}</span> <span>- {{ optionData.option.text }} - by slot</span>
|
|
</div>
|
|
</template>
|
|
</tiny-transfer>
|
|
<header>自定义渲染</header>
|
|
<tiny-transfer
|
|
v-model="value"
|
|
:data="data"
|
|
:props="{ key: 'id', label: 'text' }"
|
|
:render-content="renderDataItem"
|
|
></tiny-transfer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ref } from 'vue'
|
|
import { Transfer as TinyTransfer } from '@opentiny/vue'
|
|
|
|
const generateData = () => {
|
|
const data = []
|
|
|
|
for (let i = 0; i <= 15; i++) {
|
|
data.push({
|
|
id: i,
|
|
text: `备选项 ${i}`,
|
|
disabled: i % 4 === 0
|
|
})
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
const data = ref(generateData())
|
|
const value = ref([1, 4])
|
|
function renderDataItem(h, option) {
|
|
return (
|
|
<span>
|
|
<span class="red">{option.id}</span> - {option.text} - by jsx
|
|
</span>
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
margin: 12px 0;
|
|
}
|
|
:deep(.red) {
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
</style>
|