方法一：使用 row-key和 reserve-selection
<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="id" <!-- 必须指定row-key -->><el-table-column type="selection" width="55" :reserve-selection="true" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script setup>
import { ref, onMounted } from 'vue'const multipleTableRef = ref()
const tableData = ref([{id: 1,date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{id: 2,date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{id: 3,date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',}
])// 默认选中的行ID
const defaultSelectedIds = [1, 3]onMounted(() => {// 遍历表格数据，找到需要默认选中的行tableData.value.forEach(row => {if (defaultSelectedIds.includes(row.id)) {// 使用toggleRowSelection方法选中行multipleTableRef.value.toggleRowSelection(row, true)}})
})const handleSelectionChange = (val) => {console.log('当前选中:', val)
}
</script>
方法二：使用 select和 select-all事件
<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%"@select="handleSelect"@select-all="handleSelectAll"row-key="id"><el-table-column type="selection" width="55" /><!-- 其他列 --></el-table>
</template><script setup>
import { ref, onMounted } from 'vue'const multipleTableRef = ref()
const tableData = ref([...]) // 同上onMounted(() => {// 默认选中ID为1和3的行const rowsToSelect = tableData.value.filter(row => [1, 3].includes(row.id))rowsToSelect.forEach(row => {multipleTableRef.value.toggleRowSelection(row, true)})
})const handleSelect = (selection, row) => {console.log('选中变化:', selection)
}const handleSelectAll = (selection) => {console.log('全选变化:', selection)
}
</script>
方法三：使用 v-model 绑定选中数据
<template><el-table:data="tableData"style="width: 100%"row-key="id"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"v-model="selectedRows":reserve-selection="true"/><!-- 其他列 --></el-table>
</template><script setup>
import { ref, onMounted, watch } from 'vue'const tableData = ref([...]) // 同上
const selectedRows = ref([])// 设置默认选中的行
onMounted(() => {selectedRows.value = tableData.value.filter(row => [1, 3].includes(row.id))
})const handleSelectionChange = (val) => {console.log('选中变化:', val)
}
</script>
方法四：分页表格保留选中状态
<template><el-tableref="multipleTableRef":data="currentPageData"style="width: 100%"row-key="id"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" :reserve-selection="true" /><!-- 其他列 --></el-table><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize":total="total"/>
</template><script setup>
import { ref, computed } from 'vue'const multipleTableRef = ref()
const tableData = ref([...]) // 所有数据
const currentPage = ref(1)
const pageSize = ref(10)
const selectedRows = ref([])const total = computed(() => tableData.value.length)
const currentPageData = computed(() => {const start = (currentPage.value - 1) * pageSize.valueconst end = start + pageSize.valuereturn tableData.value.slice(start, end)
})// 默认选中某些行
onMounted(() => {const defaultSelectedIds = [1, 3, 5]selectedRows.value = tableData.value.filter(row => defaultSelectedIds.includes(row.id))
})const handleCurrentChange = (page) => {currentPage.value = page
}const handleSelectionChange = (val) => {selectedRows.value = val
}
</script>
