前端根据数据库表返回的数据生成分页功能

studystudy。。

已于 2024-03-11 10:33:20 修改

阅读量144

点赞数

文章标签：前端数据库 javascript

于 2023-03-10 14:22:31 首次发布

本文链接：https://blog.csdn.net/weixin_43551242/article/details/129441457

版权

前端结合element 处理数据分页功能：

一页10条数据

      <div class="tab">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="200px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + (pageNum - 1) * pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="role_name" align="center" label="名称" min-width="350px"> </el-table-column>
          <el-table-column prop="role_code" align="center" label="编码" min-width="350px"> </el-table-column>

          <el-table-column fixed="right" align="center" label="操作" min-width="300px">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="editClick(scope.row)">编辑</el-button>
              <el-button class="redBtn" @click="removeClick(scope.row)" type="text" size="medium">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="doc-page">
**分页：**
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total,sizes, prev, pager, next" :total="total"> </el-pagination>
        </div>
      </div>

import req from '@/utils/postgres';



methods:{
//sql查询表数据
	getData() {
	      let sqlParams = `select * from config_center_role where 1=1`;
	      req(sqlParams).then(res => {
	        this.tableData = res.rows;
	        this.total = res.rowCount;
	        this.paging();
	      });
    },
    //分页：
    paging() {
		      let pageNum = this.pageNum; // 页码
		      const pageSize = this.pageSize; // 一页显示多少个数据
		      let arry = [];
		      if ((pageNum - 1) * pageSize == this.tableData.length) {
		        pageNum--;
		      }
		      if (pageNum > 1 && arry.length == 0) {
		        arry = this.tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize);
		      } else {
		        arry = this.tableData.slice(0, pageNum * pageSize);
		      }
		      this.tableData = arry;
		      console.log(this.pageNum);
    },

     handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getData();
    }
}