ele easy table
1.0.0
npm install ele-easy-table -S
import 'ele-easy-table'
<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>
Consulte el código fuente de demostración para obtener más detalles.
Depende de element-ui, su proyecto debe instalar element-ui
Versión de Element-ui utilizada por el código fuente
"element-ui": "^2.4.5"
| propiedad | ilustrar | tipo | valor predeterminado |
|---|---|---|---|
| forma | Área de condición de consulta de tabla | Objeto | {} |
| mesa | Área de visualización de la mesa | Objeto | {} |
| formularioData.sync | campos de consulta del formulario | Objeto | {} |
| paginación | Ya sea para mostrar el área de paginación | [Booleano,Objeto] | verdadero |
| otros atributos | propiedades nativas de el-table | Consulte las propiedades nativas de el-table | - |
| propiedad | ilustrar | tipo | valor predeterminado | Observación |
|---|---|---|---|---|
| clase | Configuración de estilo del área de condición de consulta de tabla | Objeto | - | - |
| estilo | Configuración de estilo en línea del área de condición de consulta de tabla | Objeto | - | - |
| número de plegado | La tabla colapsa cuando hay más de muchas condiciones de consulta | Número | - | Sin este parámetro, se mostrará todo. |
| lista | Lista de condiciones de consulta de tabla | Formación | - | Consulte el código fuente de demostración para obtener más detalles. |
| propiedad | ilustrar | tipo | valor predeterminado | Observación |
|---|---|---|---|---|
| lista | Lista de datos de la tabla | Formación | - | - |
| columnas | Lista de encabezados de tabla | Formación | - | Consulte el código fuente de demostración para obtener más detalles. |
| está cargando | Ya sea para mostrar la animación de carga de la tabla | Booleano | - | |
| mostrar índice | Ya sea para mostrar la columna del número de serie | Booleano | verdadero | |
| indexFijo | Ya sea para arreglar la columna del número de serie | Booleano | FALSO | |
| etiqueta de índice | Personalice el texto del encabezado de la lista de números de serie | Cadena | número de serie | |
| selección | Formulario de configuración de selección múltiple | Objeto | {} |
| propiedad | ilustrar | tipo | valor predeterminado | Observación |
|---|---|---|---|---|
| configuración | Formar propiedades de selección múltiple | Objeto | - | - |
atributo nativo el-paginación
Se ejecuta cuando se cambia el número de página o cambia el número que se muestra en cada página, se obtienen los datos y luego se asignan a table.list para actualizar la lista.
eventos nativos de el-table, por ejemplo: @selection-change="handleSelectionChange" Consulte el código fuente de la demostración para obtener más detalles
| evento | ilustrar | parámetro |
|---|---|---|
| manejarAmpliar | Evento de devolución de llamada después del plegado condicional | esExpandir |
La tabla tiene un nuevo estilo en línea: visible para implementar el diseño fijo del encabezado de la tabla, simplemente agregue el siguiente estilo;
Nota: Si se trata de un estilo con ámbito, debe utilizar el operador >>> (consulte el alcance del documento CSS para obtener más detalles)
/* 全局样式 */
. el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}Consulte el código fuente de demostración para obtener más detalles.
Nota: No se puede usar con la fijación de columnas al mismo tiempo. Para usarlo al mismo tiempo, puede usar el atributo de tabla nativa del elemento para establecer la altura de la tabla. No es necesario configurar este estilo.
