主要是自己这段时间用vue+element ui的一些经验所得吧,适合刚入手的小白,话不多说,直接上干货......
这里为了直观,从开始一步一步来操作,只要一步一步看肯定能学会,加油,有问题可以咨询QQ1669819167
全天在线,欢迎打扰!抱拳ing!
项目中引入element ui 就不用说了吧......
目录
一、用到的技术栈
- vue会用就行了:https://cn.vuejs.org/v2/guide/
- 先上element ui的官网:https://element.eleme.cn/#/zh-CN/component/installation
- axios,这里不涉及二次封装,直接用封装好的axios......
二、数据展示
1.demo.vue
<template>
<div class="app-container"></div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>
2. 添加table
<template>
<div class="app-container">
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
</div>
</template>
3.模拟数据,把tableData放在return里面
// 拿到的数组
tableData: [
{
date: '2016-05-02', //data,name,address 要和html里面的 prop 一一对应
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
这个时候已经显示出来了,由于后面分页我们要把数据多造一点,因为太占空间,所以文章里我就不加了,看效果!
一般我们数据太多一个页面展示不下就会考虑到分页,
然后分页又分为纯前端分页,和前后端分页,这里我们先了解第一种前端分页
三、前端分页
1.分页需要当前页数和当前页显示的数据条数,以及重要的分页器,看代码!
分页器:
<template>
<div class="app-container">
<!-- table数据展示 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<!-- 分页器 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
background
></el-pagination>
</div>
</div>
</template>
当前页和当前页显示条数(在之前的return里面添加currentPage和pageSize)
return {
currentPage: 1, // 默认第1页
pageSize: 5, // 默认显示5条
// 拿到的数组
tableData: [...]
}
这个时候分页,总条数都出来了,但是还不能用,效果图:
想要真正的分页还得加上一句代码,两个函数
tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
<!-- table数据展示 -->
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
函数:
methods: {
// 初始页currentPage、初始每页数据数pageSize和数据data
// 每页显示条数
handleSizeChange(pageSize) {
this.pageSize = pageSize
console.log(this.pageSize) // 每页下拉显示数据
},
// 当前页
handleCurrentChange(currentPage) {
this.currentPage = currentPage
console.log(this.currentPage)
}
}
前端分页完成,功能都实现了,就不一一演示,看效果图:
这是前端分页,要是有觉得有用的朋友,不妨留下个评论,或者有什么错误的地方欢迎指出来! 第二种的话,有时间再写吧
贴个总的代码:
<template>
<div class="app-container">
<!-- table数据展示 -->
<el-table
:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<!-- 分页器 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1, // 默认第1页
pageSize: 5, // 默认显示5条
totalSize: 0, // 默认总条数为0 这个无所谓,前端分页可以计算数组的length
// 拿到的数组
tableData: [
{
date: '2016-05-02', //data,name,address 要和html里面的 prop 一一对应
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
created() {},
methods: {
// 初始页currentPage、初始每页数据数pageSize和数据data
// 每页显示条数
handleSizeChange(pageSize) {
this.pageSize = pageSize
console.log(this.pageSize) // 每页下拉显示数据
},
// 当前页
handleCurrentChange(currentPage) {
this.currentPage = currentPage
console.log(this.currentPage)
}
}
}
</script>
<style lang="scss" scoped>
</style>
最后,用到的一些属性或者方法: