ELEMENT-PLUS的表格组件高级用法

表格列的自定义渲染

可以通过设置 slots 属性来自定义表格列的渲染方式，例如：

<el-table :data="tableData">  <el-table-column prop="name" label="姓名">    <template #default="{ row, column, $index }">      <span>{{ row.name }}</span>    </template>  </el-table-column></el-table>

表格的行样式定制

可以通过设置 row-class-name 属性来自定义表格行的样式，例如：

<el-table :data="tableData" row-class-name="rowStyle"></el-table>

.rowStyle {  background-color: #f5f5f5;}

表格的分页定制

可以通过设置 pagination 属性来自定义表格的分页方式，例如：

<el-table :data="tableData" :pagination="paginationConfig"></el-table>

data() {  return {    paginationConfig: {      layout: "total, sizes, prev, pager, next, jumper",      total: 100,      pageSizes: [10, 20, 30, 50]    }  };}

表格的自定义筛选

可以通过设置 filter-method 属性来自定义表格的筛选功能，例如：

<el-table :data="tableData" :filter-method="handleFilter"></el-table>

methods: {  handleFilter(value, row, column) {    const property = column.property;    return row[property] === value;  }}

表格的数据导出

可以使用 Element-Plus 提供的 Export2Excel 方法来实现表格数据的导出，例如：

import { export_json_to_excel } from "@/utils/export2Excel";exportExcel() {  const tHeader = ["姓名", "年龄", "性别"];  const filterVal = ["name", "age", "gender"];  const list = this.tableData;  const data = this.formatJson(filterVal, list);  export_json_to_excel(tHeader, data, "表格数据");}