element plus表格和分页

需求背景:

通过接口获取数据(全部数据,未分页),然后把数据展示在表格上(支持分页)

1.获取数据(tableList为获取到的全部数据)

javascript 复制代码
this.$http.post('/xxxxx', { id }).then((res) => {
    if (res.status == 0) {
        this.tableList = res.data
        //进行分页数据处理的方法
        this.initData()
    } else {
        this.$message.error(res.info)
    }
})

2.对数据进行分页处理(pageTable为表格中展示的数据)

javascript 复制代码
initData() {
    this.pageTable = this.tableList.filter(
        (item, index) => index < this.pageNum * this.pageSize 
            && index >= this.pageSize * (this.pageNum - 1),
    )
},

3.表格和分页

html 复制代码
<el-table
    :data="pageTable"
    style="width: 100%"
    border
    height="250"
    :header-cell-style="{ backgroundColor: '#f7f8fa', color: 'black' }"
>
    <el-table-column fixed prop="skuName" label="商品名称" min-width="120" />
    <el-table-column prop="skuId" label="SKU ID" min-width="120" />
    <el-table-column prop="thirdCode" label="供应商商品编码" min-width="120" />
    <el-table-column prop="brandName" label="品牌" min-width="120" />
    <el-table-column label="操作" v-if="pageType != 'see'">
        <template #default="scope">
          <a style="cursor: pointer; color: #165bd3" 
              @click="removeProduct(scope.$index, scope.row)">
              移除
          </a>
        </template>
    </el-table-column>
</el-table>
<el-pagination
    style="margin-top: 10px; float: right"
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableList.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
/>

4.分页的方法

javascript 复制代码
//分页
handleSizeChange(e) {
  this.pageSize = e
  this.initData()
},
handleCurrentChange(e) {
  this.pageNum = e
  this.initData()
},

效果:

相关推荐
Liquidliang5 分钟前
用Claude Code构建AI创意工作流:连接nano banana与veo3
前端·aigc
半花5 分钟前
【Vue】defineProps直接和withDefaults设置默认值区别
前端·vue.js
游九尘6 分钟前
服务器都是用的iis, 前端部署后报跨域,不是用同一个服务器 是前端项目的服务器做Nginx转发,还是后端项目的服务器做Nginx转发?
服务器·前端·nginx
携欢9 分钟前
PortSwigger靶场之DOM XSS in jQuery selector sink using a hashchange event通关秘籍
前端·jquery·xss
麦兜*12 分钟前
MongoDB 备份与恢复终极指南:mongodump 和 mongorestore 深度实战
java·数据库·spring boot·mongodb·spring
Apifox21 分钟前
如何让 Apifox 发布的在线文档具备更好的调试体验?
前端·后端·测试
咔咔一顿操作25 分钟前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
0x00027 分钟前
Uniapp - 自定义 Tabbar 实现
前端·uni-app
用户4582031531729 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战30 分钟前
仿微信语音 WaveView 实现
android·前端·ios