veu3循环渲染分页

veu3的分页大多基于组件，所以今天不整手写的整组建板的；

数据为接口返回的数据

首先获取数据并赋值给变量

function fun() {
    axios({
      url: '', // url
      params: {},
    })
      .then((res) => {
        console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          gid_data.value.push(res.data.data[i]);
        }
    tableData.value = res.data.data;
    tableData.value.sort(function (a, b) {
        return a.id - b.id;
    });
    // 分页
    tableData.value = [...res.data.data];
    total.value = res.data.data.length;
    })
    .catch(function (err) {});
}
    fun();

设置变量进行分页处理

const limit = ref(10); // 每页数据
    const page = ref(1); // 默认页数
    const total = ref(0); // 总的数据

在HTML中对数据接收并处理

<!-- 列表 -->
      <el-table
        :data="tableData.slice((page - 1) * limit, page * limit)"
        height="500px"
        style="width: 98%; user-select: none"
      >
        <el-table-column prop="id" label="id" />
        <el-table-column prop="" label="轮播图片" style="display: flex; justify-content: center">
          <template #default="scope">
            <el-image :src="scope.row.imgs" style="width: 40px; height: 40px" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="轮播名称" />
        <el-table-column prop="gid" label="商品id" />
        <el-table-column prop="gname" label="商品名称" />
        <el-table-column prop="" label="操作"
          ><template #default="scope">
            <span style="color: #53ac6f" @click="bian(scope.row, scope.row.imgs)">编辑</span>
            <span style="color: red; margin-left: 10%" @click="dele(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>

最后是页数处理

<div class="paging" style="margin-left: 2%">
    <el-pagination
      :current-page="page"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="mt-4"
      v-model:page-size="limit"
      :page-sizes="[10, 15, 20]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>