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()
},

效果:

相关推荐
树上有只程序猿15 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥16 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸16 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin16 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊16 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆16 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术16 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆16 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙16 小时前
GIT 配置别名&脚本自动化执行
前端·git