表格 Table
以规则的表格显示数据集。
Attributes
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
|---|---|---|---|---|
| dataSource | 数据数组 | Array | - | [] |
| columns | 表格列 | Array | - | [] |
| hoverable | hover 效果 | boolean | - | false |
| align | 对齐方式 | string | left / center / right | left |
| empty-text | 数据数组为空时显示的文本 | string | - | 暂无数据 |
TablePropsts
interface TableProps<T = TableDefaultRow> {
dataSource: T[]
columns: TableColumn<T>[]
hoverable?: boolean
align?: TableAlign
emptyText?: string
}interface TableProps<T = TableDefaultRow> {
dataSource: T[]
columns: TableColumn<T>[]
hoverable?: boolean
align?: TableAlign
emptyText?: string
}ts
interface TableColumn<T = TableDefaultRow> {
/** render columns item */
title: string | TableTitleRender
/** 列数据在数据源中对应的路径 */
dataIndex?: string
/** render sourceData item */
render?: TableDataRender<T>
/** 列的宽度 */
width?: string | number
}interface TableColumn<T = TableDefaultRow> {
/** render columns item */
title: string | TableTitleRender
/** 列数据在数据源中对应的路径 */
dataIndex?: string
/** render sourceData item */
render?: TableDataRender<T>
/** 列的宽度 */
width?: string | number
}TableTitleRenderts
type TableTitleRender = (
h: TableRenderH,
index: number
) => VNodetype TableTitleRender = (
h: TableRenderH,
index: number
) => VNodeTableDataRenderts
type TableDataRender<T = TableDefaultRow> = (
h: TableRenderH,
dataItem: T,
index: number
) => VNodetype TableDataRender<T = TableDefaultRow> = (
h: TableRenderH,
dataItem: T,
index: number
) => VNodeTableRenderHts
/**
* @see h() https://cn.vuejs.org/api/render-function.html
*/
type Children = string | number | boolean | VNode | null | Children[]
type TableRenderH = (
type: string | Component,
props?: object | null,
children?: Children | Slot | Slots | Record<string, () => unknown>
) => VNode/**
* @see h() https://cn.vuejs.org/api/render-function.html
*/
type Children = string | number | boolean | VNode | null | Children[]
type TableRenderH = (
type: string | Component,
props?: object | null,
children?: Children | Slot | Slots | Record<string, () => unknown>
) => VNode