Vue3 solves the problem of multi-select data in pagination in el-table

Vue3 solves the problem of multi-select data in pagination in el-table

Mainly use two points: row-keyand reserve-selectionattribute

Official explanation :

• row-key

  The Key of the row data, used to optimize the rendering of the Table; this attribute is required when using the reserve-selection function and displaying tree data. When the type is String, multi-layer access is supported: user.info.id, but user.info[0].id is not supported, please use Function in this case.

• reserve-selection
  Whether to retain the option after the data is refreshed, it is only valid for the columns of type=selection, please note that row-key needs to be specified to make this function take effect

Front-end code modification

function code

//存放当前选取的数据
const multipleSelection = ref([])
//状态变化触发
const handleSelectionChange = (val) => {
    
    
    multipleSelection.value = val
}
const getRowKeys = (row) => {
    
    
	//唯一标识id，也可以是你自己数据源中的其他某个代表唯一的字段
    return row.id
}

That's it, the paging part does not need any modification.