vue3 使用 Element-plus 的 el-pagination 实现前端分页

最新推荐文章于 2025-03-26 15:02:28 发布

兜小糖的小秃毛

最新推荐文章于 2025-03-26 15:02:28 发布

阅读量5.3k

点赞数 7

分类专栏： Vue Element框架常遇问题文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Roy__Jason/article/details/126283607

版权

Vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

Element框架常遇问题

13 篇文章

订阅专栏

前端分页

一、代码如下：

<template>
  <div class="box">
    <el-table
      :loading="tableLoading"
      :data="tableData1"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      highlight-current-row
      class="table_box"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" show-overflow-tooltip label="地址">
      </el-table-column>
    </el-table>
    <div class="paginationBox">
      <el-pagination
        @size-change="handlehSizeChange"
        @current-change="handlehCurrentChange"
        :current-page="CurrentPage"
        :page-sizes="[20, 40, 60, 80, 100]"
        :page-size="PageSize"
        layout="total, jumper , prev, pager, next, sizes"
        :total="Total"
        popper-class="label-popper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import TableDataJS from "@/JSON/tableData.js";
export default defineComponent({
  name: "page-eight",
  setup() {
    const { TableDataJSON } = TableDataJS();
    const state = reactive({
      tableLoading: false,
      CurrentPage: 1,
      PageSize: 20,
      Total: 0,
      TotalList: [],
      tableData1:[],
    });
    function tableHeader() {
      return "background:#1C2838;color:#fff;font-size:14px;font-weight:bold;border:0;";
    }
    function queryTableData() {
      state.TotalList = TableDataJSON.tableData; //TableDataJSON.tableData 表格数据
      state.Total = TableDataJSON.tableData.length;
      state.CurrentPage = 1;
      if (TableDataJSON.tableData.length > 20) {
        state.tableData1 =  state.TotalList.slice(
          0,
          state.PageSize
        );
      } else {
        state.tableData1 = TableDataJSON.tableData;
      }
    }
    // 分页
    function handlehSizeChange(val) {
      state.PageSize = val;
      state.CurrentPage = 1;
      const end = state.CurrentPage * val;
      const data = state.TotalList.slice(
        state.TotalList.length > val ? end - val : 0,
        end
      );
      state.tableData1 = data;
    }
    function handlehCurrentChange(val) {
      state.CurrentPage = Math.ceil(val);
      const end = Math.ceil(val) * state.PageSize;
      const data = state.TotalList.slice(end - state.PageSize, end);
      console.log(data,'data')
      state.tableData1 = data;
    }
    onMounted(() => {
      queryTableData();
    });
    return {
      ...toRefs(TableDataJSON),
      ...toRefs(state),
      tableHeader,
      handlehSizeChange,
      handlehCurrentChange,
      queryTableData,
    };
  },
});
</script>

<style>
.box {
  width: 600px;
}
.table_box {
  height: 400px;
  overflow: auto;
}
.paginationBox {
  margin-top: 15px;
  display: flex;
  justify-content: end;
}
</style>

在这里插入图片描述

二、el-pagination分页组件显示中文

将APP.vue文件改造一下：用`<el-config-provider :locale="zhCn">`包裹一下

复制代码
<template>
  <div id="app">
    <el-config-provider :locale="zhCn">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>
<script>
import locale from "element-plus/lib/locale/lang/zh-cn";
export default {
  name: "App",
   setup () {
    return {
      zhCn: locale
    }
   }
};
</script>