1. Objeto de matriz en formato de par clave-valor
<el-tabla
resaltar-fila-actual
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
borde
estilo="ancho: 100%">
<plantilla v-for="(col, índice) en el encabezado">
<el-table-column :key="index" :prop="col.prop" :label="col.label" align="center">
</el-tabla-columna>
</plantilla>
</el-tabla>
// buscapersonas
<el-paginación
estilo="text-align: centro"
@cambio-tamaño="manejarCambioTamaño"
@cambio-actual="manejarCambioCurrent"
:página-actual="Páginaactual"
:tamaños de página="[100, 200, 300, 400]"
:tamaño de página="Tamaño de página"
diseño="total, tamaños, anterior, buscapersonas, siguiente, puente"
:total="tableData.length">
</el-paginación>
const Mock = require('mockjs') // datos de prueba
director: [
{ prop: '327', etiqueta: 'Encabezado 1' },
{ prop: '328', etiqueta: 'Encabezado 2' },
{ prop: '329', etiqueta: 'encabezado 3' },
{ prop: '330', etiqueta: 'encabezado 4' }
],
datos de tabla: [
{ 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' }
]
página actual: 1,
tamaño de página: 5
montado() {
esta.getlist()
},
métodos: {
// datos simulados
obtener lista() {
datos constantes = {
'lista|15': [{
'identificación|+1': 1,
// 'id': '@guid',
'nombre': '@cword(3)',
'net': '@cword(3)',
'sistema': '@cword(6)',
'título': '@cword(5)',
'vender': '@city()' + '@cword(2)' + 'Limitado Limitado',
'tipo': /[AZ]{2,5}-\d{5,7}/,
'línea': '@cword(2,3)' + 'línea',
'tienda': '@cword(3,5)' + 'taller de comunicación'
}]
}
resultado constante = Mock.mock(datos)
título constante = ['ID', 'línea', 'nombre', 'red', 'tienda', 'sistema', 'título', 'tipo', 'fabricante']
encabezado de tabla constante = []
Object.keys(resultado.lista[0]).forEach((clave, i) => {
tableHeade.push({ prop: clave, etiqueta: título[i] })
})
this.theheader = encabezado de tabla
this.tableData = resultado.lista
}
},
manejarTamañoCambio(val) {
this.pagesize = val
// this.$message.success(`${val} mensajes por página`)
},
manejarCurrentChange(val) {
esta.páginaactual = val
// this.$message.success(`Página actual: ${val}`)
}
}
2. Formato de lista de matriz
<el-table :data="table_content.slice((currentPage-1)*pagesize,currentPage*pagesize)" franja de borde>
<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-tabla-columna>
</el-tabla>
// buscapersonas
<el-paginación
estilo="text-align: centro"
@cambio-tamaño="manejarCambioTamaño"
@cambio-actual="manejarCambioCurrent"
:página-actual="Páginaactual"
:tamaños de página="[100, 200, 300, 400]"
:tamaño de página="Tamaño de página"
diseño="total, tamaños, anterior, buscapersonas, siguiente, puente"
:total="table_content.length">
</el-paginación>
// datos del encabezado
table_head: ['Encabezado de tabla 1', 'Encabezado de tabla 2', 'Encabezado de tabla 3', 'Encabezado de tabla 4'],
// datos del contenido de la tabla
contenido_tabla: [
['24', '20', '18', '2'],
['22', '20', '18', '2'],
['22', '20', '18', '2'],
['51', '21', '20', '6'],
['21', '20', '18', '2']
]
página actual: 1,
tamaño de página: 5
métodos: {
manejarTamañoCambio(val) {
this.pagesize = val
// this.$message.success(`${val} mensajes por página`)
},
manejarCurrentChange(val) {
esta.páginaactual = val
// this.$message.success(`Página actual: ${val}`)
}
}
Si tiene alguna pregunta, por favor contácteme o comente a continuación, gracias por su atención.Gracias