91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

ELEMENT-PLUS的表格組件高級用法

小樊
99
2024-06-14 20:32:34
欄目: 編程語言

  1. 表格列的自定義渲染

可以通過設置 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>
  1. 表格的行樣式定制

可以通過設置 row-class-name 屬性來自定義表格行的樣式,例如:

<el-table :data="tableData" row-class-name="rowStyle">
</el-table>
.rowStyle {
  background-color: #f5f5f5;
}
  1. 表格的分頁定制

可以通過設置 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]
    }
  };
}
  1. 表格的自定義篩選

可以通過設置 filter-method 屬性來自定義表格的篩選功能,例如:

<el-table :data="tableData" :filter-method="handleFilter">
</el-table>
methods: {
  handleFilter(value, row, column) {
    const property = column.property;
    return row[property] === value;
  }
}
  1. 表格的數據導出

可以使用 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, "表格數據");
}

0
高碑店市| 富顺县| 马鞍山市| 绵阳市| 江都市| 凤阳县| 南安市| 涟源市| 自治县| 云南省| 东乡县| 洪洞县| 秦安县| 桓台县| 山东| 岳阳市| 宿州市| 宁河县| 五莲县| 石首市| 行唐县| 定南县| 江津市| 克拉玛依市| 金溪县| 抚州市| 平原县| 天台县| 台州市| 兴隆县| 三河市| 托克逊县| 略阳县| 巴塘县| 鄢陵县| 上思县| 黎川县| 芷江| 长沙县| 珲春市| 图们市|