vue3+element Plus实现表格前端分页
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
每一处都写了注释,还是很容易看懂的
<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="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "HomeView",
components: {},
setup() {
//表格的全数据(这里是自定义的列表,要看分页效果自行往此数组内加数据)
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",
},
];
//表格用到的参数
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;
};
return {
allTableData,
tableData,
handleCurrentChange,
handleSizeChange,
...toRefs(state),
};
},
});
</script>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)