La esencia del desplazamiento virtual no es complicada: la intercepción y representación parcial de datos se realiza de acuerdo con la posición de desplazamiento y el rango de visualización, que es esencialmente similar al principio de paginación, excepto que los nodos inicial y final del rango de intercepción son dinámicos.
Sin embargo, es engorroso lidiar con los detalles relacionados con el desplazamiento virtual de la tabla, como cómo calcular las columnas sin un ancho establecido, la casilla de verificación recién representada para determinar el estado seleccionado, etc.
Por lo tanto, recomiende algunos componentes de mesa que puedan admitir la visualización frontal de un volumen de datos de más de 10 W para reducir la creación repetida de ruedas. Deja de decir tonterías y sigue con los productos secos.
Reaccionar:
Dirección del sitio web oficial de Ant Design :
Esta biblioteca de componentes ha sido durante mucho tiempo una biblioteca de componentes imprescindible para los desarrolladores de React. No hace falta decir que la tabla interna viene con desplazamiento virtual.
Dirección del sitio web oficial de TDesign :
La biblioteca de componentes front-end producida por Tencent no ha sido utilizada por nadie antes, pero los componentes internos de la tabla también incluyen funciones de desplazamiento virtual.
Dirección del sitio web oficial de Material-UI :
Una biblioteca de componentes de interfaz de usuario de código abierto extranjera, que originalmente se utilizó para crear una interfaz de usuario basada en la especificación Material Design de Google, y los componentes de la tabla interna también admiten el desplazamiento virtual.
VUE 2.x:
Dirección del sitio web oficial de Vxe-table
Esta es una biblioteca de componentes especializada en tablas y también es una tabla de desplazamiento virtual que recomiendo usar en vue2. Aunque también hice una tabla de desplazamiento virtual con la misma función para la empresa basada en elemnt UI, si vxe-table se lanzara medio año antes, definitivamente la elegiría y nunca inventaría mi propia rueda.
VUE 3.x:
Dirección del sitio web oficial de Vxe-table
vxe-table también tiene una biblioteca de componentes que admite la versión vue3.x, y la mayoría de las API y atributos todavía se usan, y la sensación de actualización vertical y sedosa es fluida.
dirección del sitio web oficial de element-plus
Por el nombre, sabemos que esta es una versión mejorada de elementUI, que es una biblioteca de componentes de interfaz de usuario que admite la versión vue3.x. Entre ellos, el-table-v2 es un componente de tabla que admite específicamente el desplazamiento virtual.
Dirección del sitio web oficial de TDesign :
TDesign de Tencent también incluye una tabla que admite el desplazamiento virtual dentro de la versión vue y también incluye una biblioteca de interfaz de usuario para terminales móviles y subprogramas.
Seguramente la dirección del sitio web oficial de Vue :
Seguramente Vue es desarrollado y mantenido por el equipo central de Ant Design Vue, puede entenderse como una extensión de Ant Design Vue, pero actualmente es compatible con vue 3.x. Otro pequeño lamento es que la versión gratuita de Surely Vue tendrá una marca de agua publicitaria.
La siguiente es la instrucción de eliminación de agua que utilicé para mi propia verificación, y la verificación la debo realizar yo mismo. Si utiliza Surely Vue para uso comercial, se recomienda ponerse en contacto con el sitio web oficial de Surely Vue para comprar un código de autorización para eliminar la marca de agua.
ClearStable.js escribe lógica de instrucciones
// ClearStable.js
const ClearStable = {
beforeMount(el, binding, vnode, prevVnode) {
let domArr = el.querySelectorAll('.surely-table div') // 获取元素
for (let i = 0; i < domArr.length; i++) {
// 遍历元素
let node = domArr.item(i)
if (['Unlicensed Product','Powered by Surely Vue'].includes(node.innerText)) {
node.innerText = "" // 满足条件则清空内容。
}
}
}
}
export default ClearStable
comando de montaje main.js
// main.js
import {
createApp } from 'vue'
import ClearStable from './directives/clearStable.js'
// 引入 根组件
import App from './App.vue'
// 创建vue实例
const app = createApp(App)
app.directive('clearStable', ClearStable)
app.mount('#app')
Utilice la directiva v-clearStable
<s-table v-clearStable
:columns="columns"
:data-source="dataSource">
</s-table>
Los códigos de instrucciones anteriores son solo para pruebas personales; no los utilice para uso comercial. Un llamado a respetar los esfuerzos de desarrollo de los equipos componentes.
Si tiene alguna sugerencia para el artículo, puede dejar un mensaje o un mensaje privado.