vue willtable
1.0.0
documento en ingles
Componente de tabla editable adecuado para Vue, admite múltiples operaciones de teclas de método abreviado y simula la experiencia operativa de Excel
Demostración aquí: https://demo.willwuwei.com/willtable/
Un sistema de edición y uso compartido de formularios en tiempo real entre varias personas implementado en base a este componente:
Visitar URL
Dirección del proyecto front-end
Dirección del proyecto backend
npm install vue-willtable --save
import Vue from 'vue'
import VueWilltable from 'vue-willtable'
// require styles
import 'vue-willtable/dist/vue-willtable.min.css'
Vue . component ( 'VueWilltable' , VueWilltable ) import VueWilltable from 'vue-willtable'
// require styles
import 'vue-willtable/dist/vue-willtable.min.css'
export default {
components : {
VueWilltable
}
} < template >
< willtable
ref = " willtable "
:columns = " columns "
v-model = " data "
maxHeight = " 800 " />
</ template >
< script >
export default {
data () {
return {
columns : [
{
type : ' selection ' ,
width : 40 ,
fixed : true ,
},
{
title : '序号' ,
key : ' sid ' ,
fixed : true ,
type : ' number ' ,
width : 100 ,
},
{
title : '姓名' ,
key : ' name ' ,
fixed : true ,
width : 120 ,
},
{
title : '日期' ,
key : ' date ' ,
type : ' date ' ,
width : 100 ,
},
{
title : '工作岗位' ,
key : ' email ' ,
width : 300 ,
type : ' select ' ,
options : [
{
value : ' Web前端开发' ,
label : ' Web前端开发' ,
},
{
value : ' Java开发' ,
label : ' Java开发' ,
},
{
value : ' Python开发' ,
label : ' Python开发' ,
},
{
value : ' Php开发' ,
label : ' Php开发' ,
},
],
},
{
title : '月份' ,
key : ' month ' ,
type : ' month ' ,
width : 100 ,
},
{
title : '地址' ,
key : ' address ' ,
width : 200 ,
},
{
title : '标题' ,
key : ' title ' ,
width : 300 ,
},
{
title : '内容' ,
key : ' paragraph ' ,
width : 300 ,
},
{
title : '链接' ,
key : ' url ' ,
width : 200 ,
},
{
title : ' ip ' ,
key : ' ip ' ,
width : 200 ,
validate : ( value ) => {
const pattern = / ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )( . ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )) {3} / g ;
return pattern . test (value);
},
},
{
title : '总金额' ,
key : ' sum ' ,
width : 200 ,
},
{
title : ' ID ' ,
key : ' id ' ,
width : 200 ,
},
{
title : '色值' ,
key : ' color ' ,
width : 200 ,
},
],
data : [],
},
},
mounted () {
this . getData ();
},
methods : {
getData () {
const data = [];
this . $refs . willtable . setData (data);
},
},
};
</ script >this.$refs.willtable llama al método setData para actualizar todos los datos de la tabla y restablecer los registros de datos históricos.
this.$refs.willtable llama al método getData para obtener los datos completos de la tabla.
v-model une valores
| parámetro | ilustrar | tipo | Valor opcional | valor predeterminado |
|---|---|---|---|---|
| columnas | Descripción de la configuración de las columnas de la tabla. | Formación | —— | [] |
| altura máxima | altura máxima de la mesa | cadena/número | —— | —— |
| filaAltura | altura de cada fila | cadena/número | —— | —— |
| desactivado | Edición prohibida | Booleano | —— | verdadero |
| mostrarIcono | Mostrar icono de tipo de encabezado | Booleano | —— | FALSO |
| estilo de celda | Método de devolución de llamada del estilo de celda. | Función ({fila, columna, índice de fila, índice de columna}) | —— | —— |
| nombre de clase de celda | El método de devolución de llamada del nombre de clase de la celda. | Función ({fila, columna, índice de fila, índice de columna}) | —— | —— |
| deshabilitadoCelda | Desactivar celdas | Función ({fila, columna, índice de fila, índice de columna}) => booleano | —— | () => falso |
| mostrarAddRow | Mostrar función agregar fila | Booleano | —— | FALSO |
| agregar fila y copiar | Copie la fila anterior de datos al agregar una fila | Booleano | —— | FALSO |
| nombre del evento | ilustrar | parámetros de devolución de llamada |
|---|---|---|
| cambio de selección | Este evento se activa cuando cambia la selección. | selección |
| nombre del método | ilustrar | parámetro |
|---|---|---|
| obtener datos | Se utiliza para obtener datos y devolver los datos de la tabla actual. | —— |
| establecer datos | Se utiliza para configurar datos y restablecer el historial. | datos |
| obtenerCambiarDatos | Obtener filas de datos modificadas | —— |
| getErrorRows | Obtener datos e indexar con errores de verificación | —— |
| agregar artículo | Agregue una fila de datos en la parte inferior | artículo |
| agregar fila | Agregar fila | índice de fila, copiar fila, datos personalizados |
| eliminar artículos | Para la eliminación por lotes, la clave del parámetro es el atributo de identificación único de cada fila, como la identificación, y los valores son una matriz de atributos de identificación. | clave, valor |
| establecer datos de celda | Establecer datos de celda | índice de fila, índice de columna, valor |
| pantalla completa | Visualización en pantalla completa | —— |
| salir de pantalla completa | Salir de pantalla completa | —— |
| parámetro | ilustrar | tipo | Valor opcional | valor predeterminado |
|---|---|---|---|---|
| llave | El nombre del campo correspondiente al contenido de la columna. | Cadena | —— | —— |
| título | Texto para mostrar el encabezado de columna | Cadena | —— | —— |
| ancho | ancho de columna | Cadena/Número | —— | —— |
| tipo | Tipo de columna | Cadena | selección/número/fecha/selección/mes | —— |
| formato | Formato de mil signos (para tipo de número) | Booleano | —— | verdadero |
| opciones | seleccione la opción desplegable | Formación | { valor: 'valor', etiqueta: 'texto para mostrar' } | —— |
| fijado | ¿Está fijo en el lado izquierdo? | Booleano | —— | FALSO |
| acción | Ya sea para habilitar el filtrado y la clasificación | Booleano | —— | FALSO |
| desactivado | Si prohibir la edición | Booleano | —— | FALSO |
| noVerificar | Si se debe deshabilitar la verificación | Booleano | —— | FALSO |
| validar | Verificación personalizada | Función (valor) | —— | —— |
| entrada personalizada | entrada personalizada | Función ({fila, columna, índice de fila, índice de columna, valor}) | —— | —— |
| tecla de acceso directo | ilustrar |
|---|---|
| teclas de flecha | Mover cuadro de edición |
| Ctrl+C | Pasta |
| Ctrl+V | Copiar |
| Ctrl+A | Seleccionar todas las celdas |
| Ctrl+Z | Cancelar |
| Ctrl+Y | rehacer |
| Ingresar | Edición de celdas/Edición de celdas completa |
| Eliminar, retroceder | borrar |
WillWu
