<template> <s-table :pageSize="queryParam.size" ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect:onSelect, onSelectAll:onSelectAll, }" :customRow="handleCheck" :scroll="{ y: ‘calc(100vh - 450px)‘ }" ></s-table> </template> <script> import { STable } from ‘@/components‘ const columns = [ { title: ‘发票ID‘, dataIndex: ‘id‘, key: ‘id‘, width: 100 }, { title: ‘发票号码‘, dataIndex: ‘invoiceNo‘, key: ‘invoiceNo‘, width: 100 }, { title: ‘客户名称‘, dataIndex: ‘cusName‘, key: ‘cusName‘, width: 100 }, { title: ‘上传时间‘, dataIndex: ‘createTime‘, key: ‘createTime‘, width: 100 }, ] export default { name: ‘RelationInvoice‘, computed: { }, watch: {}, components: { SerachModal, STable, DhEmpty }, data () { return { columns, selectedRowKeys: [], selectedRows:[], } }, created () { }, methods: { onSelect (record, selected, selectedRows) { if (selected) { this.selectedRows.push(record); } if (!selected) { let delIndex = this.selectedRows.findIndex(val => { return val.id === record.id }) this.selectedRows.splice(delIndex, 1); } }, onSelectAll (selected, selectedRows, changeRows) { if (selected) { this.selectedRows = this.selectedRows.concat(changeRows); } if (!selected) { let selectedRows = JSON.parse(JSON.stringify(this.selectedRows)); let delIndex = []; selectedRows.forEach((item, index) => { changeRows.forEach((val, itemIndex) => { if (item.id === val.id) { delIndex.push(index); } }) }) delIndex.forEach(item => { delete selectedRows[item]; }) selectedRows = selectedRows.filter(item => { return item != undefined; }) this.selectedRows = selectedRows } }, onSelectChange (selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys }, handleCheck (record, index) { return { on: { click: e => { const checkIndex = this.selectedRowKeys.indexOf(record.id) if (checkIndex === -1) { this.selectedRowKeys.push(record.id) this.selectedRows.push(record) } else { this.selectedRowKeys.splice(checkIndex, 1) this.selectedRows.splice(checkIndex, 1) } } } } } } } </script> <style <style lang="less" scoped> </style>
ant-vue Table组件selectedRows翻页后不保留上一页已选
原文:https://www.cnblogs.com/lvlvlv/p/13536406.html