el-table支持多页的多选

本文主要是介绍el-table支持多页的多选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在使用el-table自带多选时，会发现切页之后上一页的选择无法保持，但是在某些业务场景中，需要支持多页多选，记住之前的选择

 <el-table:data="standardDatasets"borderref="multipleTable"@select="handleSelectionChange"@select-all="handleSelectAll"><el-table-column type="selection" width="55" />
</el-table>

const selectedDataset = ref([])
const multipleTable = ref()
// 如果存在就删除 如果没有存在就加入
function handleSelectionChange(rows, row) {if (selectedDataset.value.find(item => item == row.id)) {//下面这个filter方法就是删除的方法selectedDataset.value = selectedDataset.value.filter(item => item != row.id)} else {selectedDataset.value.push(row.id)}
}
//处理全选问题
function handleSelectAll(rows) {if (rows.length) {rows.forEach(row => {if (!selectedDataset.value.find(item => item == row.id)) {selectedDataset.value.push(row.id)}})} else {standardDatasets.forEach(row => {selectedDataset.value = selectedDataset.value.filter(item => item != row.id)})}// console.log(selectedDataset.value, rows, taskList)
}

换分页的时候表格中还需要回显

nextTick(() => {taskList.forEach((item, index) => {multipleTable.value.toggleRowSelection(taskList[index], false)})})

这篇关于el-table支持多页的多选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---