基于antdesign表格多选，由于官方多选无法保存多页码数据
列表弹窗.png
<a-modal
:title="Title"
:visible="selectDatashow"
:confirm-loading="confirmLoading"
width="1000px"
@ok="handleOk"
ok-text="保存"
cancel-text="取消"
@cancel="handleCancel">
<a-table
:pagination="pagination"
@change="handleTableChange"
class="_tables"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:scroll="{ x: 920, y: 550 }"
:rowKey="(record, index) => {return index; }"
:columns="columns"
:data-source="data"
bordered>
</a-table>
</a-modal>
字段、参数
data() {
return {
onSelectData: [], // 提交数据
onData: [], // 存储旧数据
isforEach: true, // 判断是否为旧页码/ false为读显旧数据, true为push新数据
selectedRowKeys: [], // 储存需要清空勾选的key
data: [], // 列表数据
columns: [
// 表单数据格式
{
title: '序号',
dataIndex: 'rowkey',
width: '7%',
scopedSlots: { customRender: 'rowkey' }
},
// 表单数据格式
{
title: '物料编码',
dataIndex: 'materialNumber',
width: '16%',
scopedSlots: { customRender: 'materialNumber' }
},
{
title: '物料名称',
dataIndex: 'materialName',
scopedSlots: { customRender: 'materialName' }
},
{
title: '物料描述',
dataIndex: 'materialDesc',
ellipsis: true,
scopedSlots: { customRender: 'materialDesc' }
},
{
title: '规格',
dataIndex: 'materialSpecifications',
ellipsis: true,
scopedSlots: { customRender: 'materialSpecifications' }
},
{
title: '单位',
dataIndex: 'baseUnit',
scopedSlots: { customRender: 'baseUnit' }
},
{
title: '工厂',
dataIndex: 'factoryName',
ellipsis: true,
scopedSlots: { customRender: 'factoryName' }
}
],
pagination: {
position: 'bottom',
pageSize: 100,
current: 1,
total: 0
},
Title: '物料',
confirmLoading: false
};
},
方法
methods: {
// ant表格勾选事件
onSelectChange(selectedRowKeys, selectedRows) {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.onSelectData = selectedRows;
this.selectedRowKeys = selectedRowKeys; // 储存需要清空勾选的key
this.onData.forEach((item, index) => {
if (this.pagination.current === item.current) {
item.onSelectData = selectedRows; // 更新当前页数据
item.selectedRowKeys = selectedRowKeys; // 更新当前页数据key
}
});
},
// ant分页触发事件
handleTableChange(pagination, filters, sorter) {
// console.log(pagination, 'pagination');
const that = this;
const currents = that.pagination.current; // 储存上一页页码
that.sortedInfo = sorter;
const pager = { ...that.pagination };
pager.current = pagination.current;
that.pagination = pager;
that.getData();
// --↑↑ 上面为分页代码 --
// 初次缓存数据
if (this.onData && this.onData.length === 0) {
this.onData.push({
current: currents, // 储存上一页页码
onSelectData: this.onSelectData, // 储存上一页数据
selectedRowKeys: this.selectedRowKeys // 储存上一页key
});
this.selectedRowKeys = []; // 清空上一页勾选
this.onSelectData = [];
} else {
this.isforEach = true;
this.onData.forEach((item, index) => {
// 对比当前页面--进入旧页码显示已缓存勾选/进入新页码push并清空勾选
if (that.pagination.current === item.current) {
this.isforEach = false; // 进入旧页码标识
// 进入旧页码时，判断是否需要缓存上一次操作数据
const arr = this.onData.map((ite) => {
return ite.current;
});
// currents页码不存在, 先push上一页数据
if (arr.indexOf(currents) === -1 && this.onSelectData && this.onSelectData.length > 0) {
this.onData.push({
current: currents, // 储存上一页页码
onSelectData: this.onSelectData, // 储存上一页数据
selectedRowKeys: this.selectedRowKeys // 储存上一页key
});
}
// 回显勾选值
this.onSelectData = item.onSelectData;
this.selectedRowKeys = item.selectedRowKeys;
}
});
// 进入新页码，直接push
if (this.selectedRowKeys && this.selectedRowKeys.length > 0 && this.isforEach) {
this.onData.push({
current: currents, // 储存上一页页码
onSelectData: this.onSelectData, // 储存上一页数据
selectedRowKeys: this.selectedRowKeys // 储存上一页key
});
this.selectedRowKeys = []; // 清空上一页勾选
this.onSelectData = [];
}
}
// // 数组去重
const obj = {};
this.onData.map((item) => {
obj[item.current] = item;
});
this.onData = Object.values(obj);
},
// 弹窗确定
handleOk() {
let data = [];
// 有分页操作时取多页数据
if (this.onData && this.onData.length > 0) {
this.onData.push({
current: this.pagination.current, // 储存当前页
onSelectData: this.onSelectData, // 储存当前页数据
selectedRowKeys: this.selectedRowKeys // 储存当前页key
});
// // 数组去重
const obj = {};
this.onData.map((item) => {
obj[item.current] = item;
});
this.onData = Object.values(obj);
const onSelectData = this.onData.map((item) => {
return item.onSelectData;
});
onSelectData.forEach((ite) => {
data.push(...ite);
});
console.log(data);
} else {
data = this.onSelectData; // 当前页数据
}
this.confirmLoading = false;
setTimeout(() => {
this.$emit('getDalongshow', false); // 传递关闭弹窗
this.$emit('okSelect', data); // 传递弹窗数据
this.confirmLoading = false;
}, 1000);
},
// 弹窗取消
handleCancel() {
this.$emit('getDalongshow', false); // 传递关闭弹窗
},
getData() {
const params = {
currentPage: this.pagination.current,
pageSize: this.pagination.pageSize
};
commonApi.materialServer2(params).then((res) => {
if (res.data.data && res.data.data.rows) {
this.data = res.data.data.rows; // 返回数据
this.data.forEach((item, index) => {
item.rowkey = index + 1; // 序号
});
this.pagination.total = res.data.data.total; // 获取 total
}
});
}
}
大家有问题或者建议可以留言探讨
