vue + element UI实现分页 (el-pagination)

1.在html文件中引入分页组件：

 <div class="example-pagination-block">
     <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="countData"
        v-model:currentPage="currentPage"
       />
 </div>

el-pagination 部分属性：

background	是否为分页按钮添加背景色
page-size	每页显示条目个数，支持 v-model 双向绑定
total	总条目数
current-page	当前页数，支持 v-model 双向绑定

2. 设置请求参数

//vue中先引入watch
import { watch } from "vue";

//conutData从后端接口获取得到
const countData = ref(); 

const marketParams: QueryAlgConfigMarket = reactive({
  first: 0,
  pageSize: 20,
  tenantId: "",
  q: "",
});

//我使用的是graphql接口，通过onResult获取数据总数
const { result, refetch, onResult } = useQuery(
  queryAlgConfigMarket,
  {
    command: marketParams,
  },
  {
    fetchPolicy: "no-cache",
  }
);
onResult((res) => {
  countData.value = res.data?.QueryAlgConfigMarket?.count;
});

//watch监听数据变化
watch(currentPage, (val) => {
  //pagesize可以根据自己需要设置
  marketParams.first = (val - 1) * marketParams.pageSize;
});

样式如下：