网站服务器开发网页制作代码html制作一个网页

由于官方组件的onChange方法在分页重载数据时会清空selectedRows，因此我们改用onSelect和onSelectAll事件来维护selectedRows状态，避免数据丢失问题。代码如下（只抽取了选中的逻辑）

//表格的属性
:rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,onSelect:onSelect,onSelectAll:onSelectAll,
}"export default {data(){return {selectedRowKeys:[],selectedRows:[]}},methods:{onSelectChange(selectedRowKeys, selectedRows) {this.selectedRowKeys = selectedRowKeys// this.selectedRows = selectedRows // 注释这里，交由下面onSelect，onSelectAll来处理},onSelect(record, selected, selectedRows) {if (selected) {this.selectedRows.push(record)}if (!selected) {const 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))const 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}},}
}