【笔记】el-table与el-pagination结合实现数据分页

---

• https://element.faas.ele.me/#/zh-CN/component/pagination
• https://element.faas.ele.me/#/zh-CN/component/table

---

不多啰嗦，主要在以下关键点：

• 使用组件：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="pagesizes"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="disposeTickets.length"
  hide-on-single-page
>
</el-pagination>

• data中新增：

export default {
  ...
  data() {
    return {
      ...
      currentPage: 1, // 当前页
      pagesize: 10, // 页容量
      pagesizes: [10, 20, 30, 50], // 页容量数组
    };
  },
}

• methods中新增：

handleSizeChange(pagesize) {
  this.pagesize = pagesize;
},
handleCurrentChange(currentPage) {
  this.currentPage = currentPage;
},
getIndex(index) {
  let currentIndex = (this.currentPage - 1) * this.pagesize + index + 1;
  if (currentIndex < 10) {
    return `0${index + 1}`;
  }
  return (this.currentPage - 1) * this.pagesize + index + 1;
},

• *computed中新增（重点）：

computed: {
    ...mapGetters(["dataList"]),
    tableData() {
      return this.dataList.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },

• 页面模板新增：

<el-table
  :data="tableData"
  ...
>
  <el-table-column
    type="index"
    :index="getIndex"
    ...
  >

• 这里我的数据使用vuex进行管理，在el-table显示时通过计算属性来动态控制
• 若是需要显示序号可在el-table-column中使用type="index"；:index="getIndex"用来自定义序号，我这里是用：[01,02,03,04,05,06,07,08,09,10,11...]

---

over