Element UI 表格常用改造（表头添加注释、翻页连续序号【内含前端分页】）

表头添加注释

实现原理：表头插槽

<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>