element table 分页显示table数据信息

最新推荐文章于 2025-05-24 14:43:04 发布

A.颖

最新推荐文章于 2025-05-24 14:43:04 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_42517975/article/details/89631681

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用Element UI的el-table组件实现数据的分页展示。通过定义相关变量并结合分页组件，可以有效地对大量表格数据进行分页处理，提高用户界面的可读性和交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table 实现分页

代码实现：

<div style="width: 65vw;margin-top: 2%;margin-left: 3%">
  <el-table
    height="450"
    :data="userListTableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      v-if="false"
      prop="yhid"
      label="用户ID"
      width="100">
    </el-table-column>
    <el-table-column
      align="center"
      prop="yhzh"
      label="用户代码"
      width="250">
    </el-table-column>
    <el-table-column
      align="center"
      prop="yhmc"
      label="用户名称"
      width="250">
    </el-table-column>
    <el-table-column
      align="center"
      label="操作"
      width="539">
      <template slot-scope="scope">
        <el-button icon="el-icon-search" @click="updateUserName(scope.row)" type="text" >修改用户名称</el-button>
        <el-button style="margin-left: 10%;" icon="el-icon-edit" @click="updateUserQx(scope.row)" type="text"  >修改用户权限</el-button>
        <el-button style="margin-left: 10%;" icon="el-icon-delete" @click="deleteUser(scope.row)"  type="text">删除用户</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block" style="margin-top: 13px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize">
    </el-pagination>
  </div>
</div>

script代码实现：

定义变量值：

currentPage: 1,

pageSize: 5,
totalSize: 1, （所用到的变量自己定义，此处不全）

methods:{
//用户信息获取
doAxios: function (PageSize, CurrentPage, url,yhid) {
  this.loading = true;//初始化加载loading效果
  let paginData = {
    pageSize: PageSize,
    currentPage: CurrentPage,
  };
  axios({
    method: 'post',
    url: url,
    params: {
      jsonStr: JSON.stringify(paginData)
    }
  }).then((response) => {
    this.loading = false;//取消loading效果
    this.TotalSize = parseInt(response.data.totalSize);
    this.userListTableData = response.data.list;
  }).catch(function (error) {
    this.loading = false;//取消loading效果
    this.$message.error("系统错误,请联系开发人员！");
  });
},

handleSizeChange(val) {
  this.pageSize = val;
  this.doAxios(this.pageSize, 1, this.url,this.yhid);
  this.currentPage = 1;//每次改变每页多少条都会重置当前页码为1
  console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
  this.currentPage = val;
  this.doAxios(this.pageSize, this.currentPage, this.url,this.yhid );
  console.log(`当前页: ${val}`);
},

mounted() {
   this.url = 'http://192.168.100.163:8082/dxglpt/getUserList';
  this.doAxios(this.pageSize, this.currentPage, this.url,this.yhid);
},