antdv a-table pagination配置项

1 篇文章 0 订阅

在这里插入图片描述
在这里插入图片描述

<a-table
   ref="table"
    :rowKey="(record) => record.id"
    :pagination="{
        current: table.pageNumber,
        defaultPageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40'],
        showTotal: (total,range) => `${range[0]}-${range[1]}共${total}条`,
        onShowSizeChange: (current, pageSize) =>{table.pageSize = pageSize; table.pageNumber = 1},
        onChange: (pageNumber) => table.pageNumber = pageNumber
    }"
    :defaultExpandAllRows="true"
    :columns="columns"
    :dataSource="loadData"
    showPagination="auto"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
    <span slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="$refs.editForm.edit('编辑',record)">编辑</a>
        <a-divider type="vertical"/>
        <a-popconfirm placement="topRight" title="确认删除?" @confirm="() => mainDelete(record)">
            <a>删除</a>
        </a-popconfirm>
    </span>
</a-table>
table:{
    pageNumber:1,
    pageSize:10
}
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现 el-table 和 el-pagination 的组合使用,你可以 el-pagination 放置在 el-table 的外部,并通过监听 el-pagination 的页码变化事件来更新 el-table 的数据。下面是一个示例的代码: ```html <template> <div> <el-table :data="tableData" :row-key="row => row.id" :default-sort="{ prop: 'name', order: 'ascending' }" > <!-- 表格列配置 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next" ></el-pagination> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的条数 total: 0 // 总条数 }; }, methods: { handleCurrentChange(page) { this.currentPage = page; this.getData(); // 根据当前页码请求数据或者更新表格数据 }, getData() { // 根据当前页码和每页显示条数请求数据,并更新表格数据 // ... } }, mounted() { this.getData(); // 初始化时获取数据 } }; </script> ``` 在上述代码,el-table 和 el-pagination 是分开放置的,通过监听 el-pagination 的 `current-change` 事件,在回调函数 `handleCurrentChange` 更新当前页码,并调用 `getData` 方法来请求数据或者更新表格数据。 el-pagination属性 `current-page` 绑定到了 currentPage,`page-size` 绑定到了 pageSize,`total` 绑定到了 total,这些属性用于控制分页组件的显示和页码的切换。 通过设置 `layout` 属性,你可以自定义 el-pagination 的布局,这里使用了 "total, sizes, prev, pager, next" 布局,即显示总条数、每页显示条数选择、上一页、页码、下一页。 当执行 `handleCurrentChange` 方法时,你可以在其根据当前页码和每页显示条数来请求数据,并更新表格数据。在初始化时,也可以调用 `getData` 方法来获取初始数据。 请根据你实际的数据请求和更新逻辑进行相应的修改和补充。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值