a-table切换分页selectionRows数据丢失

a-table切换分页selectionRows数据丢失

使用jeecg-boot框架,Ant-design-vue组件库遇到的问题:

a-table切换分页selectionRows数据丢失

<a-table
   ref="table"
   size="middle"
   :scroll="{ x: true }"
   :loading="loading"
   bordered
   rowKey="id"
   :columns="columnsUser"
   :dataSource="dataSource"
   :pagination="pagination"
   :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
 >
 </a-table>

解决方法:

onChange:选中项发生变化时的回调

onSelectChange(selectedRowKeys, selectionRows) {
	this.selectionRows=this.selectionRows.concat(selectionRows)
	this.selectionRows=this.selectionRows.filter(item=>this.selectedRowKeys.indexOf(item.id) != -1)
	//数组对象去重
	let map = new Map();
	for (let item of this.selectionRows) {
  	if (!map.has(item.id)) {
       	map.set(item.id, item);
     	};
	};
	this.selectionRows = [...map.values()];
}
`vue-seamless-scroll` 是一个用于 Vue.js 的库,它能够实现无缝滚动效果,尤其适用于列表数据较多时的场景。而 `el-table` 是 Element UI 组件库中的一个表格组件,它提供了丰富的数据展示和操作功能,包括分页。 当你需要在 `vue-seamless-scroll` 中使用分页数据时,可以按照以下步骤进行: 1. 首先确保已经在项目中安装并引入了 `vue-seamless-scroll` 和 `el-table` 相关组件。 2. 准备你的分页数据,通常这会是一个对象,包含当前页的数据列表 `list`,以及分页相关的属性,如总记录数 `total`、当前页码 `currentPage` 和每页显示数量 `pageSize`。 3. 在模板中使用 `el-table` 来展示数据,并且根据分页数据动态设置其 `data` 属性。 4. 使用 `vue-seamless-scroll` 包裹 `el-table` 组件,确保无缝滚动效果应用在表格上。 5. 通过监听分页器的事件来动态更新 `vue-seamless-scroll` 中的数据。当分页变化时,你需要更新 `el-table` 所使用的数据列表。 6. 确保 `vue-seamless-scroll` 组件能够正确地接收到数据更新,并且无缝滚动效果得以保持。 示例代码可能如下: ```html <template> <div> <seamless-scroll class="scroll-container" :data="tableData"> <el-table :data="tableData.list"> <!-- 表格列定义 --> <el-table-column prop="field1" label="字段1"></el-table-column> <el-table-column prop="field2" label="字段2"></el-table-column> <!-- ... --> </el-table> </seamless-scroll> <!-- 分页组件 --> <el-pagination layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.currentPage" :page-sizes="[50, 100, 150]" :page-size="tableData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script> import SeamlessScroll from 'vue-seamless-scroll'; export default { components: { SeamlessScroll }, data() { return { // 分页数据 tableData: { list: [], total: 0, currentPage: 1, pageSize: 50 } }; }, methods: { fetchData(page = 1) { // 获取数据的逻辑 // 更新 tableData.list 和其他分页属性 }, handleSizeChange(newSize) { // 分页大小变化时触发 this.tableData.pageSize = newSize; this.fetchData(1); }, handleCurrentChange(newPage) { // 当前页变化时触发 this.fetchData(newPage); } }, mounted() { this.fetchData(); } }; </script> <style> .scroll-container { /* seamless-scroll 容器样式 */ } </style> ``` 在上述代码中,我们定义了一个 `vue-seamless-scroll` 组件,并将其作为 `el-table` 的容器。当用户操作分页器时,会触发 `handleSizeChange` 和 `handleCurrentChange` 方法,这些方法会更新 `tableData` 的分页属性,并通过 `fetchData` 方法重新获取数据,以展示新页的内容。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值