表头添加注释
实现原理:表头插槽
<el-table-column prop="name" width="180"> <template slot="header"> <el-tooltip effect="dark" content="身份证上的姓名" placement="top"> <span>姓名 <i class="el-icon-question"></i> </span> </el-tooltip> </template> </el-table-column>
完整范例代码:
<template> <div style="padding: 60px"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" width="180"> <template slot="header"> <el-tooltip effect="dark" content="身份证上的姓名" placement="top"> <span>姓名 <i class="el-icon-question"></i> </span> </el-tooltip> </template> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", }, ], }; }, }; </script>
翻页连续序号
实现原理:序号列插槽,根据页码、每页大小和默认序号动态生成连续序号
<el-table-column type="index" fixed label="序号" width="50px" align="center" > <template slot-scope="scope"> {{ (currentPage - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column>
完整范例代码:
<template> <div style="padding: 30px"> <el-table :data="tableData" style="width: 100%"> <el-table-column type="index" fixed label="序号" width="50px" align="center" > <template slot-scope="scope"> {{ (currentPage - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column> <el-table-column align="center" prop="date" label="日期" width="180"> </el-table-column> <el-table-column align="center" prop="name" label="姓名" width="180"> </el-table-column> <el-table-column align="center" prop="address" label="地址"> </el-table-column> </el-table> <div style="padding: 10px"> <el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="currentPage" :page-sizes="[2, 3]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="data.length" > </el-pagination> </div> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 2, tableData: [], data: [ { date: "2016-05-02", name: "王小虎1", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎2", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-02", name: "王小虎3", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎4", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-02", name: "王小虎5", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎6", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-02", name: "王小虎7", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎8", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-02", name: "王小虎9", address: "上海市普陀区金沙江路 1518 弄", }, ], }; }, mounted() { this.updateTableData(); }, methods: { pageSizeChange(newPageSize) { this.pageSize = newPageSize; this.updateTableData(); }, currentPageChange(newPage) { this.currentPage = newPage; this.updateTableData(); }, // 前端分页 updateTableData() { this.tableData = this.data.slice( (this.currentPage - 1) * this.pageSize, this.pageSize * this.currentPage ); }, }, }; </script>