15 KiB
15 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 展示行列数据。 :::
::: title 基础使用 :::
::: demo 使用 lay-table 标签, 创建表格
:::
::: title 不同尺寸 :::
::: demo
sm md lg:::
::: title 开启分页 :::
::: demo
:::
::: title 开启排序 :::
::: demo
:::
::: title 完整表格 :::
::: demo
新增 删除 {{data.username}} 😊 {{data.password}} 修改 删除
内容
:::
::: title 开启子表 :::
::: demo 当表格内容较多不能一次性完全展示时。
{{ data }}:::
::: title 树形表格 :::
::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
:::
::: title 固定表头 :::
::: demo 设置 height 或者 max-height 即可实现
:::
::: title 斑马条纹 :::
::: demo 通过 even 属性, 开启斑马条纹, 默认为 false。
:::
::: title Table 属性 :::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| columns | 列配置 - 更多 | -- | -- | -- |
| dataSource | 数据源 | -- | -- | -- |
| checkbox | 开启复选框 | boolean |
false |
true false |
| id | 主键 | string |
-- | -- |
| v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 工具栏 | boolean |
false |
true false |
| size | 尺寸 | string |
md |
lg md sm |
| children-column-name | 树节点字段 | string |
children |
-- |
| indent-size | 树表行级缩进 | number |
30 |
-- |
| height | 表格高度 | number |
-- | -- |
| maxHeight | 表格最大高度 | number |
-- | -- |
:::
::: title Table 事件 :::
::: table
| 属性 | 描述 | 参数 |
|---|---|---|
| row | 行单击 | data : 当前行 |
| row-double | 行双击 | data : 当前行 |
:::
::: title Table 插槽 :::
::: table
| 插槽 | 描述 | 参数 |
|---|---|---|
| toolbar | 自定义工具栏 | -- |
:::
::: title Table 数据 :::
::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| title | 列标题 | -- | -- | -- |
| key | 数据字段 | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- |
| width | 宽度 | -- | -- | -- |
| minWidth | 最小宽度 | -- | 100px |
-- |
| sort | 排序 | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- |
| align | 对齐方式 | string |
left |
left right center |
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | boolean |
false |
true false |
:::
::: contributor table :::
::: previousNext table :::