ElementPlus表格相关操作

ElementPlus 是一个基于 Vue 3 的组件库，它提供了丰富的 UI 组件，其中表格（Table）组件是日常开发中非常常用的一个。表格组件支持数据展示、排序、筛选、分页等多种功能，非常适合处理大量数据的展示和操作。

一、基础设置

1. 创建表格
   • 使用<el-table>组件来创建表格，并通过<el-table-column>定义表格列。
   • 示例代码：

     <el-table :data="tableData">  
       <el-table-column prop="date" label="日期" width="180"></el-table-column>  
       <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
       <!-- 更多列 -->  
     </el-table>

2. 添加数据
   • 将数据绑定到表格的el-table-column上，通过v-for指令遍历数据并显示在表格中。
   • 数据源通常是一个对象数组，每个对象代表表格中的一行。
3. 列定义
   • 使用label属性设置列头文本。
   • 使用prop属性绑定数据字段。
   • 可选地，使用width属性设置列宽。

二、样式与布局

1. 边框与斑马线
   • border属性用于设置表格是否带有边框（默认为false）。
   • stripe属性用于设置表格是否带有斑马线效果（默认为false）。
2. 表头与内容居中
   • 在<el-table>上添加:cell-style="{textAlign: 'center'}"和:header-cell-style="{'text-align': 'center'}"可使表格的所有列表的头和内容居中。
3. 列宽自适应
   • 设置el-table-column的width属性为百分比或自动（如auto），使列宽能够自适应表格宽度。
4. 锁定列
   • 通过设置el-table-column的fixed属性为true、left或right，可以将列锁定在表格的左侧或右侧。

三、交互功能

1. 排序
   • 使用sortable属性为列启用排序功能。
   • 可选地，使用sort-method属性自定义排序方法。
   • sort-by属性用于指定排序的字段（当sortable为true且没有sort-method时有效）。
2. 筛选
   • 使用filter-method属性和filter-by指令来实现数据的筛选功能。
   • 可以通过下拉列表或其他自定义方式选择筛选条件。
3. 分页
   • 使用<el-pagination>组件实现分页功能。
   • 绑定page-size和total属性来设置每页显示的条数和总条数。
   • 可选地，通过current-page和page-sizes属性自定义分页样式和选项。

四、动态操作

1. 插入行与删除行
   • 使用v-if或v-show指令动态控制行的显示与隐藏，实现插入和删除行的效果。
   • 可以通过操作数据源数组来直接添加或删除行数据。
2. 更新数据
   • 使用v-model（在Element Plus中更常用的是直接修改数据源）绑定表格数据，通过改变数据源来更新表格数据。
3. 自定义列模板
   • 使用template插槽自定义列内容，通过作用域插槽可以访问当前行的数据（row）和列对象（column）。
   • 示例：在列模板中嵌入输入框、按钮等组件，实现复杂的交互逻辑。