vue进阶之vue-easytable实现前端的表格+分页
表格+分页对于还在坑中的自己而言,勤奋的笔记不能停。还是在博客上多记录免得文件丢失到时不知哪里找。网上虽然有许多分页内容,但是对初学者而言有许多不必要的东西容易搞混阅读者。所以自己弄了一个简单纯净版的,没有过多的修饰内容。分页部分可以使用elementui中的,也可以直接用vue-easytable中的,两者一样的,没啥区别。第一步:引入vue-easytable(这个网上有许多的资料...
·
表格+分页
对于还在坑中的自己而言,勤奋的笔记不能停。还是在博客上多记录免得文件丢失到时不知哪里找。网上虽然有许多分页内容,但是对初学者而言有许多不必要的东西容易搞混阅读者。所以自己弄了一个简单纯净版的,没有过多的修饰内容。分页部分可以使用elementui中的,也可以直接用vue-easytable中的,两者一样的,没啥区别。
第一步:引入vue-easytable
(这个网上有许多的资料,可以自己去找)
给个vue-easytable的链接:API&实例
1:npm下载vue-easytable
npm install vue-easytable --save-dev
2:在main.js中全局引入
import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'
Vue.component(VTable.name,VTable)
Vue.component(VPagination.name,VPagination)
第二步:创建表格数据
因为这里没有连接后端,所以要分页肯定需要一大串数据,直接写data里有点长久分离出来了。下面给了部分数据(删除后的)
export default[
{'id':'1','name':'小红','age':'12','height':'112','sex':'女','score':'100'},
{'id':'2','name':'小丽','age':'12','height':'116','sex':'女','score':'99'},
{'id':'3','name':'小芳','age':'12','height':'113','sex':'女','score':'98'},
{'id':'4','name':'小华','age':'12','height':'130','sex':'男','score':'96'},
{'id':'5','name':'小聪','age':'12','height':'120','sex':'男','score':'93'},
{'id':'6','name':'小胖','age':'12','height':'118','sex':'男','score':'86'},
{'id':'7','name':'小明','age':'12','height':'121','sex':'男','score':'59'},
{'id':'8','name':'小飞','age':'12','height':'125','sex':'男','score':'92'},
{'id':'9','name':'小环','age':'12','height':'120','sex':'女','score':'93'},
{'id':'10','name':'小义','age':'12','height':'116','sex':'男','score':'79'},
{'id':'11','name':'小白','age':'12','height':'116','sex':'男','score':'81'},
{'id':'12','name':'小黑','age':'12','height':'118','sex':'男','score':'88'},
{'id':'13','name':'小海','age':'12','height':'125','sex':'男','score':'83'},
{'id':'14','name':'小金','age':'12','height':'129','sex':'男','score':'82'},
{'id':'15','name':'小路','age':'12','height':'127','sex':'女','score':'72'},
{'id':'16','name':'小龙','age':'12','height':'125','sex':'男','score':'96'},
{'id':'17','name':'小蓝','age':'12','height':'118','sex':'女','score':'93'},
{'id':'18','name':'小兰','age':'12','height':'124','sex':'女','score':'71'},
{'id':'19','name':'小高','age':'12','height':'116','sex':'女','score':'79'},
{'id':'20','name':'小国','age':'12','height':'130','sex':'男','score':'68'},
]
第三步:代码编写
创建一个tablePage.vue
<template>
<div class="tablePage">
<h1>表格+分页</h1>
<!-- 表格-->
<v-table
:columns="tableConfig.columns"
:table-data="tableConfig.tableData"
:paging-index="(pageIndex-1)*pageSize">
</v-table>
<!-- 分页-->
<v-pagination
@page-change="pageChange"
@page-size-change="pageSizeChange"
:total="total" :page-size="pageSize"
:layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']">
</v-pagination>
</div>
</template>
<script>
//引入数据
import tableDate from "../mock/tableData1.js";
export default {
data() {
return {
pageIndex: 1,
pageSize: 10,
total:'',
tableConfig: {
tableData: [],
columns: [
{
field: "id",
title: "编号",
width: 50,
columnAlign: "center"
},
{
field: "name",
title: "姓名",
width: 120,
columnAlign: "center"
},
{
field: "age",
title: "年龄",
width: 50,
columnAlign: "center",
},
{
field: "height",
title: "身高",
width: 100,
columnAlign: "left",
},
{
field: "sex",
title: "性别",
width: 50,
columnAlign: "center",
},
{
field: "score",
title: "成绩",
width: 80,
columnAlign: "center",
}
]
}
};
},
created() {
this.getTableData();
},
methods: {
getTableData() {
this.tableConfig.tableData = tableDate.slice(
(this.pageIndex - 1) * this.pageSize,
this.pageIndex * this.pageSize
);
this.total = tableDate.length;
},
pageChange(pageIndex) {
this.pageIndex = pageIndex;
this.getTableData();
console.log(pageIndex);
},
pageSizeChange(pageSize) {
this.pageIndex = 1;
this.pageSize = pageSize;
this.getTableData();
}
}
};
</script>
效果图展示
更多推荐
已为社区贡献7条内容
所有评论(0)