博主需要在项目中需要使用el-tableel-pagination标签实现表格分页功能,方法如下:

  1. el-table标签的data属性是显示的数据,绑定为showTable计算属性
<el-table
      :data="showTable"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      highlight-current-row
      height="400"
      style="border:1px solid #dfe6ec;"
      v-loading="loading"
    >
      <el-table-column 
      type="index" 
      label="序号" 
      width="60" 
      align="center"
      ></el-table-column>
      ...
</el-table>
  1. el-pagination标签current-change事件会在当前页改变时被触发,绑定为handleCurrentChange方法,page-size属性绑定的是每页显示条目个数
<el-col :span="24" class="toolbar" style="text-align:center">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pagesize"
        :total="this.filterAutomobileInfs.length"
      ></el-pagination>
</el-col>
  1. 设置初始化数据并编写事件触发的方法
export default {
  data() {
    return {
      ...
      pagesize: 10, //设置每页显示条目个数为10
      currentPage: 1, //设置当前页默认为1
      filterAutomobileInfs: [], //分页前的数据
      ...
    }
  },
  computed: {
  //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterAutomobileInfs.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    }
  },
  methods: {
    //设置当前页为点击页
   	handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    }
  }
}

这样就通过改变表格中绑定的data数据,利用vue数据驱动这一特点实现了表格分页功能。效果如下:

  1. 第1页,显示的数据有10条,分页组件显示共有15条数据
    第一页
  2. 翻到第2页,显示了剩下5条数据
    第二页

博主本以为功能已经成功实现,但是理想很丰满,现实很骨感。博主在测试过程中还是发现了一个有趣的bug:功能有时好使有时不好使(不好使的情况是查询条件无误的时候查询后却没有数据)。遇到这种情况我的表情是这样的:╯﹏╰。根据以往经验,博主首先怀疑是某处的js异步导致的,但是几经折腾却没有什么进展。
于是,博主加强了测试力度,最终得出结论:只有在翻到从第2页开始的之后的页面查询时才会出现无数据的情况。这回答案应该比较明显了,应该是跟页数有关。又考虑到vue的数据驱动特性,终于明白了问题所在:
我们点击第2页之后的页数时会改变当前页数,这个时候点击查询,系统根据查询条件筛选符合条件的数组赋值给定义的filterAutomobileInfs数据项,计算属性通过slice方法筛选表格应显示的数据,而此时currentPage还是改变后的当前页数,所以导致slice方法筛选的数据索引不正确,出现无数据或数据异常的问题。

知道问题原因就好办多了,只需在查询时重新设置当前页数为1就好了,如下:

methods: {
    //查询方法
    searchAutomobile() {
      //currentPage赋值为1
      this.currentPage = 1;
      //筛选方法
      this.filterAutomobile();
    }
    ...
}

这次的问题给我带来的启发很多,我们在遇到问题时一定要多做测试探究问题出现的条件和环境,并且多考虑当前技术的原理,希望借此篇博客与大家共勉吧!

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐