拿到数据通过分页参数渲染列表

proSourceCodeList.slice((pageInfo.current - 1)* pageInfo.pageSize, pageInfo.current * pageInfo.pageSize)
这段代码是实现目的的精华

<div class="source-list" v-if="proSourceCodeList.length != 0 && proSourceCodeList">
     <div class="source-item"
          v-for="(item, index) in proSourceCodeList.slice((pageInfo.current - 1)     
          * pageInfo.pageSize, pageInfo.current * pageInfo.pageSize)"
          :key="index">
              <div class="item-top"></div>
              <div class="item-bottom">
                  <div class="name">{{ item.name }}</div>
              </div>
      </div>
      <div class="pagination">
         <div class="pagination-end">
             <a-pagination v-model:current="pageInfo.current" v-    
                     model:pageSize="pageInfo.pageSize" show-less-items             
                     :total="pageInfo.count" size="small" style="margin-top:10px ;float:         
                      right;" />
          </div>
       </div>
</div>

声明变量

let proSourceCodeList = ref([])
let pageInfo = reactive({
    current: 1,
    pageSize: 4,
    count: 0,
})

接口请求到的数据

then((res)=>{
    //接口成功参数
    proSourceCodeList.value = res.result.productList
    pageInfo.count = proSourceCodeList.value.length
})

随便写的样式

<style lang="less" scoped>
.source-list {
        width: 1200px;
        height: 500px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;


        .source-item {
            width: 294px;
            height: 400px;
            background: #FFFFFF;
            box-shadow: 0px 4px 10px 0px rgba(101, 101, 101, 0.1);

            .item-top {
                width: 294px;
                height: 300px;
                background-color: #FFAB50;
            }

            .item-bottom {
                width: 294px;
                height: 100px;
                padding-left: 20px;
                padding-top: 14px;

                .name {
                    width: 100%;
                    height: 20px;
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }

                .company {
                    width: 100%;
                    height: 20px;
                    margin-top: 10px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;

                }

                .price {
                    width: 90%;
                    height: 20px;
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }

        .pagination {
            width: 100%;
            height: 56px;
            // background-color: #2EB135;

            .pagination-end {
                float: right;
            }
        }

    }
</style>