可以通過設置 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, "表格數據");
}