ytPagination基于el-pagination分页切换的组件

使用场景

数据量大时，使用分页切换数据

实例属性

属性名	默认值	类型	描述	是否必填
total	0	Number	总条目数
page	1	Number	当前页码
limit	20	Number	每页显示的最大数量
pageSizes	[10, 20, 30, 50]	Array	每页显示个数选择器的选项设置
pageCount	7	Number	页码按钮的数量，当总页数超过该值时会折叠(大于等于 5 且小于等于 21 的奇数)
layout	"total, sizes, prev, pager, next, jumper"	String	组件布局，子组件名用逗号分隔 (sizes, prev, pager, next, jumper, ->, total, slot)
background	true	Boolean	是否为分页按钮添加背景色
paginationColor	{"--activeBgColor": "pink", // 选中的背景色" --fontColor": "#fff", // 选中的字体颜色"--hoverColor": "#ff0000", // 鼠标悬停的字体颜色}	Object	分页按钮的样式

事件

事件名	参数	描述
pagination		获取分页变换后的值

简单使用

<!--
 * @Description: ytPagination分页组件的使用 页面
 * @Author: mhf
 * @Date: 2023/11/26 16:09
-->
<template>
  <div class="ytPagination">
    <ytPagination
        :background="false"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :page-sizes="pageSizes"
        :pagination-color="paginationColor"
        @pagination="getTableData"
    />
  </div>
</template>

<script>
export default {
  name: "useYtPagination",
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      total: 120,
      pageSizes: [5, 10, 15, 20],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      paginationColor: {
        "--activeBgColor": "transparent",
        "--fontColor": "orange",
        "--hoverColor": "green",
      },
    };
  },
  methods: {
    getTableData() {
      console.log(this.queryParams);
    },
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
};
</script>

<style lang="scss" scoped>
.ytPagination {
}
</style>