Durante el proceso de desarrollo, cuando los datos no son muy grandes, la interfaz maneja la paginación de los datos de la lista. Aquí hay algunos códigos de pasos clave.
1. Solicite todos los datos
obtenerLista(){
dejar parámetros = {
enParametros:{
}
}
this.$axios({url:httpUrl.assetsIpArea.ipQuery,método:'post',params:params}).luego((res) =>{
consola.log(res,'----')
si(res.columnList){
this.tableDataHeader = res.columnList
}
if(res.valueList && res.valueList.length > 0){
this.tableDataMsg = res.valueList // almacena todos los datos
this.tableData = res.valueList // Almacena todos los datos y se utilizarán al procesar consultas de palabras clave
this.total = res.valueList.length
}
esta.listadepáginas()
})
}
2. Método pageList() de procesamiento de paginación
lista de páginas() {
let $self = esto;
$self.tableDataMsgList = $self.tableDataMsg.filtro(
(elemento, índice) =>
índice < $self . queryArgs . pageNum * $ self . queryArgs . pageSize &&
índice >= $self.queryArgs.pageSize * ($self.queryArgs.pageNum - 1)
);
console.log(this.tableDataMsgList,'¿Son estos los datos de la página actual?') // Estos son los 10 datos predeterminados para una de las páginas
$self.total = $self.tableDataMsg.length;
},
3. Esto es para usar el buscapersonas en element-ui para procesar la paginación.
<el-paginación
@cambio-tamaño="manejarCambioTamaño"
@cambio-actual="manejarCambioCurrent"
:página-actual="queryArgs.pageNum"
:tamaños de página="[10, 20, 30, 40]"
:page-size="queryArgs.pageSize"
diseño="total, tamaños, anterior, buscapersonas, siguiente, puente"
:total="total"
>
4. Cómo cambiar de paginación y cambiar el tamaño de página
manejarTamañoCambio(val) {
this.$refs.tableList.clearSort() //Esto se usa para borrar la clasificación de la página actual
this.queryArgs.pageSize = val;
this.queryArgs.pageNum = 1;
this.pageList();
},
manejarCurrentChange(val) {
console.log(this.$refs.tableList,'reffff')
this.$refs.tableList.clearSort() //Esto se usa para borrar la clasificación de la página actual
this.queryArgs.pageNum = val;
this.pageList();
},
En este punto, la paginación del procesamiento del front-end ha finalizado y el próximo artículo compartirá el front-end para lograr la clasificación en la lista de datos de la tabla.