首先，在 el-table 中添加 :row-key=“getRowKeys” 和 selection-change 事件（当选择项发生变化时会触发该事件）。然后，给多选框的一列添加 :reserve-selection=“true”。

<!-- 表格 -->
<div><el-table class="base-table" :data="tableData" border height="100%" :row-class-name="handleSetTableRowClass" :row-key="getRowKeys" @selection-change="handleChange"><el-table-column type="selection" width="55" :reserve-selection="true"/></el-table><!-- 分页 --><el-paginationref="pagination":total="paginationInfo.totalSize":page-size="paginationInfo.limit":page-sizes="paginationInfo.limitList":current-page="paginationInfo.currentPage"layout="total, sizes, prev, pager, next, jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange"></el-pagination>
</div>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import type { PaginationType } from '@/types/global.d'//表格
const tableData = ref([])
const multipleSelection = ref([])// 高亮列表数据
const handleSetTableRowClass = ({ row, rowIndex }) => {}/** ElementUI的table实现分页多选功能 ----star */
// 设置表格每一页的唯一标识
const getRowKeys = (row) => {return row.id
}// 选择表格事件
const handleChange = (val) => {multipleSelection.value = val.map(item => item.id)
}
/** ElementUI的table实现分页多选功能 ----end */// 分页
const pagination = ref(null)
const paginationInfo = reactive<PaginationType>({totalSize: 0,currentPage: 1,limit: 20,limitList: [20, 50, 100, 200]
})// 分页-每页条数
const handleSizeChange = (val) => {let { limit, totalSize, currentPage } = toRefs(props.paginationInfo)limit.value = valif(val > totalSize.value && currentPage.value > 1) returnreload(true, false)
}// 分页-当前页数
const handleCurrentChange = (val) => {let { limit, totalSize, currentPage } = toRefs(props.paginationInfo)currentPage.value = valreload(true, false)
}// 表单查询-获取表格数据
const getData = async() => {}
</script>