antd table表格删除末页数据,跳回上一页

12 篇文章 0 订阅
当删除第二页的最后一条数据后,自动获取第一页

公共方法

export function calcPageNo (total, pageNo = 1, pageSize = 10, delNum = 1) {
  const restNum = total - pageSize * (pageNo - 1)
  let pageNoDiff = Math.floor((delNum - restNum) / pageSize) + 1
  pageNoDiff < 0 && (pageNoDiff = 0)
  pageNo = pageNo - pageNoDiff
  pageNo < 1 && (pageNo = 1)
  return pageNo
}

删除操作后

let pageNo = calcPageNo(
	 this.pagination.total,
	   this.pagination.current,
	   this.pagination.pageSize,
	   1
	 )
	 this.pagination.current = pageNo
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现跨页多选需要记录选中的数据的ID,可以使用Vue的Reactive响应式对象来进行数据绑定和监听。具体实现步骤如下: 1. 定义一个空数组selected,用来存储选中的数据的ID。 ```javascript import { reactive } from 'vue'; const state = reactive({ selected: [] }); ``` 2. 在表格的每一行中添加一个多选框,绑定一个change事件,根据选中状态添加或删除选中的数据的ID。 ```html <template> <a-table :dataSource="data" :columns="columns"> <template #selection="{row}"> <a-checkbox v-model:checked="isSelected(row.id)" @change="handleSelect(row.id, $event.target.checked)"></a-checkbox> </template> </a-table> </template> ``` ```javascript const handleSelect = (id, checked) => { if (checked) { state.selected.push(id); } else { state.selected.splice(state.selected.indexOf(id), 1); } }; ``` 3. 在表格的分页组件中添加一个自定义的选中项数量显示组件,根据selected数组的长度来显示选中项的数量。 ```html <template> <div> <a-pagination :total="total" :current="current" @change="handleChange"></a-pagination> <span>已选中 {{ selected.length }} 项</span> </div> </template> ``` 4. 在分页组件的change事件中,重新加载当前页的数据时,需要将之前选中的数据的ID与当前页的数据进行比对,保留选中状态。 ```javascript const handleChange = (page, pageSize) => { // 获取当前页的数据 const newData = fetchData(page, pageSize); // 比对选中状态 const selectedIds = new Set(state.selected); newData.forEach(item => { if (selectedIds.has(item.id)) { item.selected = true; } }); // 更新表格数据 state.data = newData; }; ``` 这样就可以实现跨页多选了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值