ElementPlus表格相关操作大全

Element Plus 的 `<el-table>` 组件提供了丰富的功能来满足各种表格展示和操作的需求。以下是一些关键的表格操作和 API 介绍：

1. **基础用法**：通过设置 `el-table` 的 `data` 属性来插入数据到表格列中，使用 `prop` 来指定数据字段，`label` 定义列名，`width` 定义列宽。

2. **条纹表格**：设置 `stripe` 属性为 `true` 可以显示条纹间隔的表格。

3. **带边框的表格**：设置 `border` 属性为 `true` 可以显示垂直边框。

4. **固定列和表头**：对于大量数据，可以同时固定表头和列。通过 `fixed` 属性在 `el-table-column` 中实现。

5. **流体高度表格**：设置 `max-height` 属性可以固定表头，并且当行高超过最大高度时显示滚动条。

6. **分组表头**：通过嵌套 `el-table-column` 来实现数据层级的展示。

7. **自定义列模板**：通过插槽（slots）可以自定义列的内容，包括表头和单元格。

8. **可展开行**：使用 `type="expand"` 和插槽来实现行的展开，可以显示更多的内容。

9. **行选择**：通过设置 `highlight-current-row` 属性和 `current-row-key` 属性来实现行的选择。

10. **行样式和类名**：可以通过 `row-class-name` 和 `row-style` 属性来自定义行的样式和类名。

11. **列样式和类名**：可以通过 `cell-class-name` 和 `cell-style` 属性来自定义单元格的样式和类名。

12. **表格事件**：Element Plus 表格支持多种事件，如 `select`、`select-all`、`selection-change`、`cell-click` 等。

13. **表格插槽**：`default` 插槽用于自定义默认内容，`append` 插槽用于在表格最后插入内容，`empty` 插槽用于自定义空数据时的显示内容。

14. **表格方法**：Element Plus 表格提供了一些方法，如 `clearSelection`、`getSelectionRows`、`toggleRowSelection` 等，用于操作表格。

15. **表格列 API**：`el-table-column` 组件提供了多种属性，如 `type`、`index`、`label`、`prop`、`width`、`min-width`、`fixed` 等，用于定义列的行为和样式。

16. **树形数据和懒加载**：可以通过设置 `lazy` 属性和 `load` 方法来实现树形数据的懒加载。

17. **总结行**：通过设置 `show-summary` 属性和 `summary-method` 方法来显示总结行。

18. **动态表格**：可以根据后台返回的数据动态渲染表格，包括动态生成表格列和行。

19. **多级表头**：通过嵌套 `el-table-column` 组件来创建多级表头。

20. **单元格合并**：使用 `span-method` 方法来实现单元格的行合并或列合并。

Element Plus 官方文档提供了详细的 API 描述和使用示例，你可以参考 [Table | Element Plus](https://element-plus.org/zh-CN/component/table.html) 来获取更多信息。