vue willtable
1.0.0
Documento em inglês
Componente de tabela editável adequado para Vue, suporta múltiplas operações de teclas de atalho e simula a experiência operacional do Excel
Demonstração aqui: https://demo.willwuwei.com/willtable/
Um sistema de compartilhamento e edição de formulários em tempo real para várias pessoas implementado com base neste componente:
Visitar URL
Endereço do projeto front-end
Endereço do projeto de back-end
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 chama o método setData para atualizar todos os dados da tabela e redefinir os registros de dados históricos.
this.$refs.willtable chama o método getData para obter todos os dados da tabela.
v-model vincula valores
| parâmetro | ilustrar | tipo | Valor opcional | valor padrão |
|---|---|---|---|---|
| colunas | Descrição da configuração das colunas da tabela | Variedade | —— | [] |
| altura máxima | altura máxima da mesa | string/número | —— | —— |
| altura da linha | altura de cada linha | string/número | —— | —— |
| desabilitado | Edição proibida | Booleano | —— | verdadeiro |
| showIcon | Mostrar ícone de tipo de cabeçalho | Booleano | —— | falso |
| estilo de célula | Método de retorno de chamada de estilo de célula | Função({linha, coluna, rowIndex, columnIndex}) | —— | —— |
| célulaClassName | O método de retorno de chamada do className da célula | Função({linha, coluna, rowIndex, columnIndex}) | —— | —— |
| desativadoCélula | Desativar células | Função({linha, coluna, rowIndex, columnIndex}) => Boolean | —— | () => falso |
| mostrarAddRow | Mostrar função adicionar linha | Booleano | —— | falso |
| addRowAndCopy | Copie a linha de dados anterior ao adicionar uma linha | Booleano | —— | falso |
| nome do evento | ilustrar | parâmetros de retorno de chamada |
|---|---|---|
| mudança de seleção | Este evento é acionado quando a seleção muda | seleção |
| nome do método | ilustrar | parâmetro |
|---|---|---|
| obter dados | Usado para obter dados e retornar os dados atuais da tabela | —— |
| definir dados | Usado para definir dados e redefinir o histórico | dados |
| getChangeData | Obtenha linhas de dados alteradas | —— |
| getErrorRows | Obtenha dados e índice com erros de verificação | —— |
| adicionarItem | Adicione uma linha de dados na parte inferior | item |
| adicionarRow | Adicionar linha | rowIndex, copyRow, dados personalizados |
| remover itens | Para exclusão em lote, a chave do parâmetro é o atributo de identificação exclusivo de cada linha, como id, e os valores são uma matriz de atributos de identificação. | chave, valor |
| setCellData | Definir dados da célula | rowIndex, colunaIndex, valor |
| tela cheia | Exibição em tela cheia | —— |
| sair em tela cheia | Sair da tela inteira | —— |
| parâmetro | ilustrar | tipo | Valor opcional | valor padrão |
|---|---|---|---|---|
| chave | O nome do campo correspondente ao conteúdo da coluna | Corda | —— | —— |
| título | Texto de exibição do cabeçalho da coluna | Corda | —— | —— |
| largura | largura da coluna | String/Número | —— | —— |
| tipo | Tipo de coluna | Corda | seleção/número/data/seleção/mês | —— |
| formatar | Formato de mil sinais (para tipo de número) | Booleano | —— | verdadeiro |
| opções | selecione a opção suspensa | Variedade | { valor: 'valor', rótulo: 'texto de exibição' } | —— |
| fixo | É fixo no lado esquerdo? | Booleano | —— | falso |
| Ação | Se deve ativar a filtragem e a classificação | Booleano | —— | falso |
| desabilitado | Se deve proibir a edição | Booleano | —— | falso |
| nãoVerificar | Se deseja desativar a verificação | Booleano | —— | falso |
| validar | Verificação personalizada | Função (valor) | —— | —— |
| entrada personalizada | entrada personalizada | Função({linha, coluna, rowIndex, columnIndex, valor }) | —— | —— |
| tecla de atalho | ilustrar |
|---|---|
| Teclas de seta | Mover caixa de edição |
| Ctrl + C | Colar |
| Ctrl+V | cópia |
| Ctrl+A | Selecione todas as células |
| Ctrl+Z | Cancelar |
| Ctrl+Y | refazer |
| Digitar | Edição de células/Edição completa de células |
| Excluir, Backspace | excluir |
WillWu
