HTML

表格（:data="filterData"绑定的数据）

<el-table ref="multipleTableRef" :data="filterData" style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column property="question" label="问题" width="200"></el-table-column><el-table-column property="answer" label="答案" width="200" />        
</el-table>

分页

<el-paginationv-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[100, 200, 300, 400]":small="small":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>//:total="tableData.length"总数据长度

js

<script lang="ts" setup>import { ref } from 'vue'//原始数据
const tableData = reactive([{question: '问题01',answer: '答案01',classify: '分类01',state: '生效01',},{question: '问题02',answer: '答案02',classify: '分类02',state: '生效02',},
])let filterData: any = reactive([])   // 过滤后的数据,用于绑定分页
filterData = tableData.slice(0, 10)  //重新赋值加载十条数据，避免加载没有数据，或数据过长const currentPage4 = ref(4)  //当前在第几个分页
const pageSize4 = ref(10)    //:page-sizes="[10, 20, 30, 40]" 默认每页展示几条数据
const small = ref(false)
const disabled = ref(false)
const background = ref(false)// 点击每页显示多少触发的函数  
const handleSizeChange = (val: number) => {//把需要展示的数据替换为截取的数据filterData = tableData.slice(0, val)
}// 点击前往第几页触发的函数
const handleCurrentChange = (val: number) => {//把需要展示的数据替换为截取的数据filterData = tableData.slice(10*(val-1),val*10)
}</script>

Pagination 分页 | Element Plus (element-plus.org)