layui/example/docs/zh-CN/components/transfer.md

111 lines
1.6 KiB
Markdown
Raw Normal View History

2021-10-26 01:13:23 +08:00
::: title 基础使用
2021-10-19 22:28:44 +08:00
:::
::: demo
<template>
2021-10-14 18:35:09 +08:00
<lay-transfer :dataSource="dataSource1"></lay-transfer>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-14 18:35:09 +08:00
const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
return {
2021-10-14 18:35:09 +08:00
dataSource1
}
}
}
</script>
:::
2021-10-14 18:35:09 +08:00
2021-10-26 01:13:23 +08:00
::: title 指定标题
2021-10-19 22:28:44 +08:00
:::
2021-10-14 18:35:09 +08:00
::: demo
<template>
<lay-transfer :dataSource="dataSource2" :title="title"></lay-transfer>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const dataSource2 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
const title = ['我喜欢的','我不喜欢的']
return {
dataSource2,
title
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 使用插槽
:::
::: demo
<template>
<lay-transfer :dataSource="dataSource1">
<template v-slot:item="{ data }">
{{data.id}}
</template>
</lay-transfer>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
return {
dataSource1
}
}
}
</script>
2021-10-14 18:35:09 +08:00
:::
2021-10-26 01:13:23 +08:00
::: title transfer 属性
:::
2021-11-07 15:55:08 +08:00
::: table
2021-10-26 01:14:17 +08:00
| Name | Description | Accepted Values |
| ---------- | ----------- | --------------- |
| dataSource | 数据来源 | -- |
| title | 标题 | -- |
| id | 主键 | -- |
2021-11-07 15:55:08 +08:00
:::
2021-10-26 01:13:23 +08:00
::: title transfer 插槽
:::
2021-11-07 15:55:08 +08:00
::: table
2021-10-26 01:14:17 +08:00
| Name | Description | Accepted Values |
| ---- | ----------- | --------------- |
| item | 列表项 | { data } |
2021-11-07 15:55:08 +08:00
2021-11-07 15:56:24 +08:00
:::
2021-12-16 17:57:59 +08:00
::: comment
:::