<template>
<div class="home">
<el-table :data="tableData()" style="width: 100%">
<el-table-column type="index" width="50" />
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="名字" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
<div class="example-pagination-block">
<!-- <div class="example-demonstration">分页</div> -->
<el-pagination
background
layout="prev, pager, next ,total,sizes"
:total="state.total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRefs,onMounted ,inject,Ref,ref} from "vue";
import {get} from '../../../api/core.js'
//表格的全数据（这里是自定义的列表，要看分页效果自行往此数组内加数据）
onMounted(()=>{
MenuAll.data=JSON.parse(window.localStorage.getItem('menu') || '')
console.log(MenuAll.data);
})
const MenuAll=reactive({
data:[]
})
const allTableData = [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
];
//表格用到的参数
const state = reactive({
page: 1,
limit: 10,
total: allTableData.length,
});
//前端限制分页（tableData为当前展示页表格）
const tableData = () => {
return allTableData.filter(
(item, index) =>
index < state.page * state.limit &&
index >= state.limit * (state.page - 1)
);
};
//改变页码
const handleCurrentChange = (e) => {
state.page = e;
};
//改变页数限制
const handleSizeChange = (e) => {
state.limit = e;
};
</script>简单的前端表格与分页器的业务逻辑