element plus表格和分页

mfxcyh2023-12-12 15:08

需求背景：

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

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

效果：