feat: add column desc api and example (#2)
Co-authored-by: GU Yiling <justice360@gmail.com>
This commit is contained in:
parent
5139c42764
commit
c93403bb83
@ -10,6 +10,7 @@ function appendLoader (config, loader) {
|
||||
|
||||
module.exports = {
|
||||
target: 'static',
|
||||
telemetry: false,
|
||||
|
||||
/**
|
||||
* Headers of the page
|
||||
|
@ -20,6 +20,7 @@
|
||||
| `sortable` | `boolean=` | `false` | [^sortable] |
|
||||
| `align` | `string=` | - | 内容对齐方式,支持 `left`/`center`/`right`。 |
|
||||
| `span` | `function(number): Object=` | | [^span] |
|
||||
| `desc` | `string` | - | 表头描述。 |
|
||||
|
||||
^^^sortable
|
||||
本列是否支持排序。
|
||||
@ -45,6 +46,7 @@
|
||||
| `foot` | [^slot-foot] |
|
||||
| `default` | [^scoped-slot-default] |
|
||||
| `sub-row` | [^scoped-slot-sub-row] |
|
||||
| `desc` | [^scoped-slot-desc] |
|
||||
|
||||
^^^slot-foot
|
||||
列脚区域。
|
||||
@ -73,3 +75,7 @@
|
||||
如果所属的 `Table` 组件定义了插槽 `sub-row`,单独列的 `sub-row` 将被覆盖。
|
||||
:::
|
||||
^^^
|
||||
|
||||
^^^scoped-slot-desc
|
||||
表头描述。提供 `close` 函数,用于关闭展现描述内容的容器。使用此插槽时会覆盖 `Column` 的插槽 `desc` 内容。
|
||||
^^^
|
||||
|
@ -36,6 +36,12 @@
|
||||
|
||||
[[ demo src="/demo/table/expandable.vue" ]]
|
||||
|
||||
### 表头描述
|
||||
|
||||
使用 `desc` 属性或 `desc` 插槽来为表头增加描述信息。
|
||||
|
||||
[[ demo src="/demo/table/desc.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
93
one/docs/demo/table/desc.vue
Normal file
93
one/docs/demo/table/desc.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-table
|
||||
:ui="ui"
|
||||
:data="data"
|
||||
key-field="id"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
:desc="nameDesc"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
<template #desc="{ close }">
|
||||
<p>This is a description for bid.</p>
|
||||
<veui-button @click="close">close</veui-button>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-button': Button
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
id: '31541',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '31552',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '31563',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '31574',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
}
|
||||
],
|
||||
nameDesc: 'This is a description for name.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user