Vue 前端杂七杂八
2022年9月10日

Vue3-element-plus实现表格分页连动效果。

作者 admin

前段时间一个页面需求，自己研究了一下 感觉场景很实用的功能，把代码贴出来 免得自己忘记。

基于vue3+el-pagination实现表格分页效果

vue3+element-plus 为我们前端开发带来了极大的便捷
1、el-table + el-pagination

  <el-table :data="table_data.value.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
    <!-- 根据选中的每页允许展示的数据行数和当前的页码进行数据的切分 -->
    <el-table-column fixed prop="id" label="ID编号" />
    <el-table-column prop="name" label="角色" />
    <el-table-column prop="enable" label="账号状态" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button link type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button link type="text" size="small" @click="handleEnable(scope.$index, scope.row)">禁用</el-button>
      </template>
    </el-table-column>
  </el-table>

<div class="demo-pagination-block">
    <el-pagination 
      class="page-content" 
      v-model:currentPage="currentPage" 
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 30]" 
      :small="small"  
      :disabled="disabled" 
      :background="background"
      layout="total, sizes, prev, pager, next, jumper" 
      :total="this.table_data.value.length"
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" />
  </div>


2、数据段代码
 data() {
  name: "roleTable",
  props: ['tableData'],
    return {
      table_data: this.tableData,
      currentPage: 1, //当前页码
      pageSize: 5,
      small: false,
      background: true,
      disabled: false,
    }
  },

 created() {
    this.table_data.value = JSON.parse(JSON.stringify(this.table_data.value))
    //this.table_data.value 转义后格式 
       [{"id": 28,
        "name": "测试人员4",
        "description": "",
        "enable": "禁用",
        },
       {
        "id": 27,
        "name": "线下",
        "description": "",
        "enable": "禁用",
       }]
  },


3、展示数据的序号,根据业务需求来决定是否需要该项功能
<el-table-column label="序号">
    <template #default="scope">
         {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
    </template>
</el-table-column>

最后来看一下效果吧

搞定

标签Vue

651 条评论在 “Vue3-element-plus实现表格分页连动效果。”

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注