element-table + el-pagination 实现分页多选功能

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

html 复制代码

<!-- 表格 -->
<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-pagination
    	ref="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 = val
    if(val > totalSize.value && currentPage.value > 1) return

    reload(true, false)
}

// 分页-当前页数
const handleCurrentChange = (val) => {
    let { limit, totalSize, currentPage } = toRefs(props.paginationInfo)
    currentPage.value = val

    reload(true, false)
}

// 表单查询-获取表格数据
const getData = async() => {}
</script>