Back

vuejs - 使用分页 element-ui pagination

发布时间: 2021-04-19 00:27:00

参考：https://stackoverflow.com/questions/64604714/vue-pagination-how-to-use-it/67154639#67154639

element-ui  : https://element.eleme.cn/#/zh-CN/component/pagination

vuejs 是一个前端，所以这决定了它的分页跟Rails不同，没那么简单。

所以我们需要：

1. 选择一个前端框架

2. 找到它的分页组件, 使用之。

3. 根据前端的分页组件，研究并实现后端分页代码。

代码：

在vuejs 中：

注意下面的 @current-change 

        <div class="block" style='float: right'>
          <el-pagination
            background
             layout="prev, pager, next"
             :total="general_statistics_total_count"
             :page-size='100'
             @current-change='handleCurrentChange'
             >
          </el-pagination>
        </div>

然后，在script中：（注意其中的 select ... limit ... offset ...）

data中：
    general_statistics_total_count : 0;
    offset: 0   // 这个用来标记当前页面的页数的offset , 用于后续的更新页面（例如 update, delete等操作）

methods 中：
      init(){
        // 获得顶部下拉单
        this.get_statistics_categories()
        this.load_table_data(this.offset)
      },
      load_table_data(offset = 0, limit = 100){

        // 获得table1 数据
        let db = this.$database_tool.get_db()
        let that = this
        db.serialize(function(){
          let sql_count = `select count(*) as count from general_statistics`
          db.get(sql_count, [], function(error, row){
            that.general_statistics_total_count = row.count;
          })

          let sql = `
            select provinces.name as province_name,
              categories.name as category_name,
              year,
              value
              from general_statistics
              join provinces on general_statistics.province_id = provinces.id
              join categories on general_statistics.category_id = categories.id
              order by general_statistics.id desc limit ${limit} offset ${offset}
          `
          db.all(sql, [], function(error, rows){
            that.table1_data = rows;
          })
        })
        db.close();
      },

Back