element的表格el-table和el-pagination分页根据表格数据实现纯【前端分页】

分页组件：

<el-pagination v-model:current-page="pageNo" :page-sizes="[5, 10, 20, 50, 100, 200]"
                           v-model:page-size="pageSize" background layout="total, prev, pager, next, sizes, jumper"
                           :total="personList.length" @current-change="handleCurrentChange"
                           @size-change="handleSizeChange">
            </el-pagination>

const personList = ref([])  //列表所有的数据集合

const pageNo = ref(1)
const pageSize = ref(20)

const handleCurrentChange = (number) => {
  pageNo.value = number
}
const handleSizeChange = (size) => {
  pageSize.value = size
}

 

关键代码：

:data="personList.slice((pageNo - 1) * pageSize, pageNo * pageSize)"

<el-table ref="refTable" :data="personList.slice((pageNo - 1) * pageSize, pageNo * pageSize)" border stripe height="70vh" v-else>
　　　　<el-table-column type="index" label="序号" width="60" align="center"/>
</el-table>