分页相关配置【前端控制】

基础用法

前端获取完整表数据，在前端进行分页。

在controlAtrr-pageObj中定义翻页相关信息

属性	值	说明
@handleSizeChange	函数名	更改分页大小后触发方法
@handleCurrentChange	函数名	点击翻页后触发方法

html示例：

<yui-table
    :rowData="
      rowData.length > 0
        ? rowData.slice(
            (controlAtrr.pageObj.pageData.page - 1) * controlAtrr.pageObj.pageData.size,
            controlAtrr.pageObj.pageData.page * controlAtrr.pageObj.pageData.size
          )
        : ''
    "
    :headerData="headerData"
    :controlAtrr="controlAtrr"
    @handleSizeChange="handleSizeChangeT1"
    @handleCurrentChange="handleCurrentChangePageT1"
>
</yui-table>

controlAtrr 示例：

{
  pageObj: { //分页对象
    position: "right", //分页组件位置 right left
    background: false, // 带有背景色的分页 false / true
    small: true, // 小型分页 false / true
    hide_on_single_page: true, // 当只有一页时隐藏分页
    pager_count: 5, // 设置最大页码按钮数
    page_sizes: [10, 15, 20, 30, 50, 200],  // 接受一个整型数组，数组元素为展示的选择每页显示个数的选项
    layout: "total,sizes,prev, pager, next,jumper", // 表示需要显示的内容，用逗号分隔，布局元素会依次显示。
    total: 10, // 总条数
    pageData: {
      page: 1,  // 页数
      size: 10  // 每页条数
    }
  },
}

vue.js示例

<script lang="ts">  
  methods: {
      // 表1 分页
      // 页码变化
      handleCurrentChangePageT1(e) {
        // 接收页码变化 及后续操作
        console.log("点击页码：", e);
        this.controlAtrr['pageObj']['pageData']['page'] = e;
      },
      // 条数变化
      handleSizeChangeT1(e) {
        // 接收条数变化 及后续操作
        console.log("选择页大小：", e);
        this.controlAtrr['pageObj']['pageData']['size'] = e;
      },
    },

</script>

效果

注意事项

如果table表格设置的了“：table_size”，则分页组件大小跟随表格大小变动。