42 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 展示行列数据。 :::
::: title 基础使用 :::
::: demo 使用 lay-table 标签, 创建表格
:::
::: title 不同尺寸 :::
::: demo
sm md lg:::
::: title 开启分页 :::
::: demo
:::
::: title 开启排序 :::
::: demo
:::
::: title 开启子表 :::
::: demo 当表格内容较多不能一次性完全展示时, 你可以将多余内容展示到 expand 插槽。
:::
::: title 树形表格 :::
::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
{{ data }}:::
::: title 固定表头 :::
::: demo 设置 height 或者 max-height 即可实现
:::
::: title 斑马条纹 :::
::: demo 通过 even 属性, 开启斑马条纹, 默认为 false。
:::
::: title 定义样式 :::
::: demo 通过 cellStyle rowStyle cellClassName rowClassName 属性, 自定义单元格样式。
:::
::: title 不同风格 :::
::: demo 通过 skin 属性, 切换 table 风格。
:::
::: title 固定行列 :::
::: demo 通过 fixed 属性实现列固定, 可选值为 left 与 right。
:::
::: title 开启序号 :::
::: demo 通过 columns 配置 type:'number' 开启序号列。
:::
::: title 开启多选 :::
::: demo 通过 columns 配置 type:'checkbox' 开启单选列。
:::
::: title 开启单选 :::
::: demo 通过 columns 配置 type:'radio' 开启单选列。
:::
::: title 暂无数据 :::
::: demo 通过 columns 配置 type:'radio' 开启单选列。
:::
::: title 刷新数据 :::
::: demo 通过 data-source 的赋值，实现数据的更新
:::
::: title 开启统计 :::
::: demo 通过 columns 配置 totalRow 开启行统计。
:::
::: title 合并行列 :::
::: demo 通过 span-method 属性, 自定义行列合并的逻辑。
:::
::: title 行内编辑 :::
::: demo 通过 span-method 属性, 自定义行列合并的逻辑。
:::
::: title 复杂表头 :::
::: demo 通过 span-method 属性, 自定义行列合并的逻辑。
:::
::: title 加载过渡 :::
::: demo 通过 span-method 属性, 自定义行列合并的逻辑。
:::
::: title 完整表格 :::
::: demo 使用了绝大部分属性的 table 案例
新增 删除 {{data.name}} 😊 {{data.birthday}} 修改 删除:::
::: title Table 属性 :::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 | 版本 |
|---|---|---|---|---|---|
| columns | 列配置 - 更多 | -- | -- | -- | -- |
| dataSource | 数据源 | -- | -- | -- | -- |
| checkbox | 开启复选框 | boolean |
false |
true false |
-- |
| id | 主键 | string |
-- | -- | -- |
| v-model:selectedKeys | 选中项 (多选) | -- | -- | -- | -- |
| v-model:selectedKey | 选中项 (单选) | -- | -- | -- | -- |
| 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 |
-- | -- | -- |
| even | 斑马条纹 | boolean |
false |
true false |
-- |
| cellStyle | 列样式 function(row, column, rowIndex, columnIndex) | string function |
-- | -- | -- |
| rowStyle | 行样式 function(row, rowIndex) | string function |
-- | -- | -- |
| cellClassName | 列类名称 function(row, column, rowIndex, columnIndex) | string function |
-- | -- | -- |
| rowClassName | 行类名称 function(row, rowIndex) | string function |
-- | -- | -- |
| skin | 风格 | string |
-- | line row nob |
-- |
| expand-index | 展开所在列 | number |
-- | -- | -- |
| default-expand-all | 默认展开所有列 | boolean |
false |
true false |
-- |
| expand-keys | 展开的列 | array |
[] |
-- | -- |
| span-method | 合并算法 | function |
-- | -- | 1.4.0 |
| getCheckboxProps | 多选行属性 | function |
-- | -- | 1.4.0 |
| getRadioProps | 单选行属性 | function |
-- | -- | 1.4.0 |
:::
::: title Table 事件 :::
::: table
| 属性 | 描述 | 参数 |
|---|---|---|
| row | 行单击 | data : 当前行 |
| row-double | 行双击 | data : 当前行 |
| row-contextmenu | 行右击 | data : 当前行 |
| change | 分页事件 | { current: 当前页码, limit: 每页数量 } |
| ::: |
::: title Table 插槽 :::
::: table
| 插槽 | 描述 | 参数 | 版本 |
|---|---|---|---|
| toolbar | 自定义工具栏 | -- | -- |
| footer | 底部扩展 | -- | 1.4.4 |
:::
::: title Table 数据 :::
::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 | 版本 |
|---|---|---|---|---|---|
| title | 列标题 | -- | -- | -- | -- |
| key | 数据字段 | -- | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- | -- |
| width | 宽度 | -- | -- | -- | -- |
| minWidth | 最小宽度 | -- | 100px |
-- | -- |
| sort | 排序 | -- | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- | -- |
| align | 对齐方式 | string |
left |
left right center |
-- |
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | boolean |
false |
true false |
-- |
| fixed | 列固定 | string |
-- | left right |
-- |
| type | 列类型 | string |
-- | number checkbox radio |
-- |
| children | 表头分组 | string |
-- | number checkbox radio |
1.4.0 |
:::
::: contributor table :::
::: previousNext table :::