一、键值对格式数组对象
<el-table
highlight-current-row
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
style="width: 100%">
<template v-for="(col, index) in theader">
<el-table-column :key="index" :prop="col.prop" :label="col.label" align="center">
</el-table-column>
</template>
</el-table>
// 分页器
<el-pagination
style="text-align: center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
const Mock = require('mockjs') // 测试数据
theader: [
{ prop: '327', label: '表头1' },
{ prop: '328', label: '表头2' },
{ prop: '329', label: '表头3' },
{ prop: '330', label: '表头4' }
],
tableData: [
{ 327: '24', 328: '20', 329: '18', 330: '2' },
{ 327: '22', 328: '20', 329: '18', 330: '2' },
{ 327: '22', 328: '20', 329: '18', 330: '2' },
{ 327: '51', 328: '21', 329: '20', 330: '6' },
{ 327: '21', 328: '20', 329: '18', 330: '2' }
]
currentPage: 1,
pagesize: 5
mounted() {
this.getlist()
},
methods: {
// mockjs 数据
getlist() {
const data = {
'list|15': [{
'id|+1': 1,
// 'id': '@guid',
'name': '@cword(3)',
'net': '@cword(3)',
'system': '@cword(6)',
'title': '@cword(5)',
'vender': '@city()' + '@cword(2)' + '有限公司',
'type': /[A-Z]{2,5}-\d{5,7}/,
'line': '@cword(2,3)' + '线',
'shop': '@cword(3,5)' + '通信车间'
}]
}
const result = Mock.mock(data)
const title = ['ID', '线', '名称', 'net', 'shop', '系统', '标题', '类型', '厂家']
const tableHeade = []
Object.keys(result.list[0]).forEach((key, i) => {
tableHeade.push({ prop: key, label: title[i] })
})
this.theader = tableHeade
this.tableData = result.list
}
},
handleSizeChange(val) {
this.pagesize = val
// this.$message.success(`每页 ${val} 条`)
},
handleCurrentChange(val) {
this.currentPage = val
// this.$message.success(`当前页: ${val}`)
}
}
二、数组列表格式
<el-table :data="table_content.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe>
<el-table-column :label="item" v-for="(item, idx) in table_head" :key="idx" align="center">
<template slot-scope="scope">{ { table_content[scope.$index][idx] }}</template>
</el-table-column>
</el-table>
// 分页器
<el-pagination
style="text-align: center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="table_content.length">
</el-pagination>
// 表头数据
table_head: ['表头1', '表头2', '表头3', '表头4'],
// 表格内容数据
table_content: [
['24', '20', '18', '2'],
['22', '20', '18', '2'],
['22', '20', '18', '2'],
['51', '21', '20', '6'],
['21', '20', '18', '2']
]
currentPage: 1,
pagesize: 5
methods: {
handleSizeChange(val) {
this.pagesize = val
// this.$message.success(`每页 ${val} 条`)
},
handleCurrentChange(val) {
this.currentPage = val
// this.$message.success(`当前页: ${val}`)
}
}
如有问题请与我联系或评论下方, 感谢关注. 谢谢