1. Array object in key-value pair format
<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>
// pager
<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') // test data
theader: [
{ prop: '327', label: 'Header 1' },
{ prop: '328', label: 'Header 2' },
{ prop: '329', label: 'header 3' },
{ prop: '330', label: 'header 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 data
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)' + 'Limited Limited',
'type': /[A-Z]{2,5}-\d{5,7}/,
'line': '@cword(2,3)' + 'line',
'shop': '@cword(3,5)' + 'communication workshop'
}]
}
const result = Mock.mock(data)
const title = ['ID', 'line', 'name', 'net', 'shop', 'system', 'title', 'type', 'manufacturer']
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} messages per page`)
},
handleCurrentChange(val) {
this.currentPage = val
// this.$message.success(`Current page: ${val}`)
}
}
2. Array list format
<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>
// pager
<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>
// header data
table_head: ['Table Header 1', 'Table Header 2', 'Table Header 3', 'Table Header 4'],
// table content data
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} messages per page`)
},
handleCurrentChange(val) {
this.currentPage = val
// this.$message.success(`Current page: ${val}`)
}
}
If you have any questions, please contact me or comment below, thank you for your attention. Thank you