element table切换分页不勾选的自带方法
场景一:没有回显勾选的情况
table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true
<template> <el-table v-loading="loading" ref="multipleTable" tooltip-effect="dark" :row-key="getRowKey"> <el-table-column label="" type="selection" width="50" align="center" :reserve-selection="true"></el-table-column> </table> </template>
<script>
methods: {
// 指定一个key标识这一行的数据
getRowKey (row) {
return row.id
}
}
</script>
场景二:有回显勾选情况
<template> <el-table v-loading="loading" ref="multipleTable" :data="tableData" @select="onTableSelect" @select-all="onTableSelectAll" tooltip-effect="dark"> <template> <script type="text/javascript"> methods: { // 取消默认选中项(单个勾选) /** *@list 接口返回的默认勾选数组 *@id 列表唯一标识 */ onTableSelect (rows, row) { if (!rows.includes(row)) { const index = this.list.findIndex(item => item.id=== row.id) this.list.splice(index, 1) } else { this.list.push(row) } }, // 全选操作 onTableSelectAll (arr) { if (!arr.length) { // 直接取消选中全部 this.tableData.forEach((v) => { const index = this.list.findIndex(i => i.id === v.id) if (index !== -1) { this.list.splice(index, 1) } }) } else { // 直接选中全部 this.tableData.forEach((v) => { const index = this.list.findIndex(i => i.id=== v.id) if (index === -1) { this.list.push(v) } }) } } } <script>