Estamos experimentando un problema de rendimiento en el proyecto
vue + elementUI tabla tabla muestra los datos, el momento en que una gran cantidad de datos, no un espectáculo de meta, mientras que una petición de datos es demasiado grande, aumentará el tiempo de renderización de páginas, que afecta a la experiencia,
esta vez a menudo tienen dos maneras de tratar con,
1, ficha, como sigue
2, si no quiero a la página, y quiere mostrarlo todos los datos en una página? De hecho, este tiempo puede ser perezosos datos cargados
La siguiente tabla muestra una fila de inicio de los datos es sólo el 31
Cuando la barra de desplazamiento se tira bajo, entonces se cargará los datos de 31 años, si el resto de los datos es menor que 31, entonces el resto de la carga
De acuerdo con los requisitos del proyecto, que requiere una puede ver todos los datos, así que elegí la segunda forma en la
Así que la segunda manera de cómo lograrlo?
Entender cómo funciona antes de tener que distinguir tres atributos:
scrollHeight: se refiere a la altura total del elemento que contiene el contenido de la barra de desplazamiento. Atributo de sólo lectura. Sin px unidades. Es la siguiente figura, altura 54 de datos, pero debido a la barra de desplazamiento, por lo que la pantalla no se puede ver como un alto
scrollTop: cuando el elemento de barra de desplazamiento, desplazarse hacia abajo, desplazarse hacia arriba el contenido de la distancia. Leer y escribir. Sin px unidades. Si el elemento se desplaza no scrollTop bar es 0, el valor sólo puede ser positivo. El rojo es la altura del bastidor inferior
clientHeight: el tamaño del área de cliente del elemento, el elemento se refiere al tamaño del espacio ocupado por el contenido de sus bordes, de hecho, el tamaño de la zona visible. Es la altura de las flechas rojas en la siguiente figura
Cómo determinar que la barra de desplazamiento laminado en la parte inferior de la misma?
scrollHeight-scrollTop-clientHeight = 0, esto es cuando se puede rodar la barra de desplazamiento en la parte inferior de la época.
La primera vez que los datos solicitados, primer conjunto una variable para registrar el número de solicitudes (de hecho, es hacer paginación procesamiento en segundo plano)
el presente . .currentPage = 1 , $ la presente = el presente ; el presente . axios.fun $ () entonces (RES =>. { $ la presente .totalPage = res.totalPage; // aquí necesitará saber el número total de páginas $ la presente .tableData = RES. datos; // datos de la tabla })
Desplazamiento de detector de eventos objeto de tabla dom
DOM = el dejar document.querySelector (targetDom); dom.addEventListener ( "Scroll", la función () { const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight; IF (scrollDistance <= 0) { // es igual a 0 prueba ya al final, puede solicitar interfaz IF ($ el este .currentPage <$ el este .totalPage) { // el número de página actual menor que el número total de hojas pidió $ el este .currentPage ++; // número de página actual incrementado // interfaz de código de solicitud $ el este . $ axios.fun (). entonces (RES => { $ el presente= $ .TableData la presente .tableData.concat (res.data) // posterior solicitud de datos y se combina con la muestra en ese momento }) } } })
Así, se logra tabla de datos de carga diferida desplegable desplazamiento, el deseo de ayudar a los estudiantes que lo necesitan.
Bowen enlace cita: https://segmentfault.com/a/1190000018756141?utm_source=tag-newest