使用elementUI的时候,想把它的表格组件和分页器组件组合使用,然后就去研究了一下。主要实现代码如下:
<template>
<div>
<el-table
:data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
style="width: 100%"
:row-class-name="tableRowClassName">
<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>
<el-pagination
background
layout="prev, pager, next, jumper"
@size-change = 'handleSizeChange'
@current-change='handleCurrentChange'
:current-page='currpage'
:page-size='pagesize'
:total="tableData.length">
</el-pagination>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
handleSizeChange(val) {
this.pagesize = val
},
handleCurrentChange(val) {
this.currpage = val
}
},
data() {
return {
tableData: [],
curentPage1: 1, //默认最开始是第几页
pagesize: 5, //每页数据条数
currpage: 1, //默认开始页面
}
},
created() {
axios.get('/api/testmock')
.then(res => {
this.tableData = res.data.arr.list
})
},
}
</script>
<style scoped>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
其中接口是用的mockjs写的模拟接口,代码如下:
import Mock from 'mockjs'
Mock.mock('/api/testmock', 'get', () => {
return {
status: 200,
arr: Mock.mock({
'list|20-50': [
{
name: '@cname()',
address: '@city(true)',
date: '@date()'
}
]
})
}
})