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

基础用法

前端获取当前页表数据，通过后台接口控制翻页。

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

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

html示例：

<yui-table
    :rowData="rowData2"
    :headerData="headerData2"
    :controlAtrr="controlAtrr2"
    @handleSizeChange="handleSizeChangeT2"
    @handleCurrentChange="handleCurrentChangePageT2"
>
</yui-table>

controlAtrr 示例：

{
  pageObj: { //分页对象
    position: "left", //分页组件位置 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">
   // 引入获取表数据接口
  import {GetTableData2} from "@/api/tableData";
  
  data() {
      return {
        // 是否显示加载状态 true/false
        load_staus2: false,
        // 控制类组件属性
        controlAtrr2: {},
        //行数据属性
        rowData2: [],
        //表头属性
        headerData2: [],
      }
    },
  
  methods: {
      // 表2 分页
      // 页码变化
      handleCurrentChangePageT2(e) {
        console.log("点击页码：", e);
        // 接收页码变化 及后续操作
        var parm_data =
          {
            page: e,
            size: this.controlAtrr2['pageObj']['pageData']['size']
          };
        this.load_staus2 = true;
        GetTableData2(parm_data).then((res: any) => {
          if (res.meta.code == "0") {
            this.rowData2 = res.data.rowData;
            this.headerData2 = res.data.headerData;
            this.controlAtrr2 = res.data.controlAtrr;
            this.load_staus2 = false;
          }

        });

      },
      // 条数变化
      handleSizeChangeT2(e) {
        // 接收条数变化 及后续操作
        console.log("选择页大小：", e);
        // 接收页码变化 及后续操作
        var parm_data =
          {
            page: 1,
            size: e
          };
        this.load_staus2 = true;
        GetTableData2(parm_data).then((res: any) => {
          if (res.meta.code == "0") {
            this.rowData2 = res.data.rowData;
            this.headerData2 = res.data.headerData;
            this.controlAtrr2 = res.data.controlAtrr;
            this.load_staus2 = false;
          }

        });
      },
    },

</script>

效果

注意事项

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