antdv表格a-table带分页列合计功能方案总结

antdv表格a-table合计功能实现总结

1.需求背景
  • 最近开发财务项目中使用到了UI框架antdv,而使用最多的就是a-table了,它继承了antD表格的许多优点,在表格内容自定义功能上是有绝对的优势的。在财务项目中更多的会与数字打交道,从而就不可避免的需要使用到表格列合计功能。
  • 如果是没有分页的表格列合计功能是简单的,但是带有分页功能的表格列合计功能可不是那么简单的,好了,话不多说,进入主题吧。
解决方案
  • 1.首先我的方法是通过新加一合计行的原理来进行的,所以首先在请求数据的回调中对要合计的项自行进行累加计算。

  • 2.在a-table组件中进行合计功能处理:

    • // 1.分页参数设置(默认一页展示20条)
      ipagination: {
             
         current: 1,
         pageSize: 20,
         pageSizeOptions<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
对于 el-table 表格分页且可以拖拽的功能,你可以使用 Element UI 提供的 el-pagination 分页组件和 el-table-column 的 sortable 属性来实现。以下是一个示例代码: ```html <template> <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" :row-key="row => row.id" :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#333' }" style="width: 100%;" @sort-change="handleSortChange" > <el-table-column prop="name" label="Name" sortable width="180" ></el-table-column> <el-table-column prop="date" label="Date" sortable width="180" ></el-table-column> <el-table-column prop="address" label="Address" width="180" ></el-table-column> <el-table-column label="Actions" width="120" > <template slot-scope="scope"> <span class="action-button">Edit</span> <span class="action-button">Delete</span> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px; text-align: right;" ></el-pagination> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John Doe', date: '2021-01-01', address: '123 Main St' }, { id: 2, name: 'Jane Smith', date: '2021-02-01', address: '456 Elm St' }, // more data... ], currentPage: 1, pageSize: 10, total: 20, }; }, methods: { handleSortChange(sort) { // 排序逻辑 console.log(sort); }, handleSizeChange(size) { // 每页显示条数改变逻辑 console.log(size); }, handleCurrentChange(page) { // 当前页码改变逻辑 console.log(page); }, }, }; </script> <style scoped> .action-button { color: #409eff; cursor: pointer; margin-right: 10px; } </style> ``` 在这个示例中,el-table 的数据通过 `tableData` 属性进行绑定,el-pagination 的当前页码、每页显示条数和总数分别绑定到 `currentPage`、`pageSize` 和 `total` 属性。你可以根据实际情况进行调整和修改。 需要注意的是,以上代码仅提供了分页和排序的基本实现,拖拽功能需要根据具体需求进行自定义开发,可以使用 Element UI 提供的 el-draggable 组件结合 el-table 实现拖拽功能。具体实现方式可以参考 Element UI 官方文档中的示例和说明。 希望这个示例可以帮助到你!如果有任何问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木屋x

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值