Element-UI 表格组件详解（如何使用以及自定义插槽）

目录

一、Table表格介绍

基本结构：

数据绑定：

列配置：

排序和筛选：

分页和加载：

选择功能：

操作功能：

自定义模板：

样式和布局：

合并单元格：

 二、el-table表格使用

1.基础表格

 2.带斑马纹表格or带边框表格

 3.排序功能

 4.筛选功能

5.分页功能

 6. 自定义列模板

7.树形数据

8. 行展开

 9.显示溢出提示

 10.多级表头

 三、el-table实战应用

1.具有复选框，可多选表格同时具备自定义插槽表格

 2.具备开关状态表格

 3.具备滑块表格

 四、el-table表格总结

---

一、Table表格介绍

用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。

1. 基本结构：

   • <el-table>：主表格组件。
   • <el-table-column>：定义表格的列，必须在 <el-table> 内部使用。

2. 数据绑定：

   • :data：表格数据源，通常为数组格式，如 [{ name: 'John', age: 30 }]。
   • prop：列对应的数据字段，通常与数据源的属性匹配。

3. 列配置࿱