vue willtable

composant de table modifiable vue-willtable

document anglais

Composant de tableau modifiable adapté à Vue, prend en charge plusieurs opérations de touches de raccourci et simule l'expérience d'exploitation d'Excel

Démo ici : https://demo.willwuwei.com/willtable/

Un système de partage et d'édition de formulaires multi-personnes en temps réel implémenté sur la base de ce composant :

Visiter l'URL

Adresse du projet frontal

Adresse du projet back-end

capture d'écran

caractéristiques

• Réglage de la largeur du tableau
• Colonnes du tableau corrigées
• Filtrage et tri des données
• Sélection multiple de lignes
• Suppression par lots et copier-coller
• Copier et coller avec Excel
• Copie déroulante des données
• Le tableau peut défiler automatiquement lors du déroulement vers le bas pour copier ou sélectionner plusieurs cellules.
• Obtenir les lignes de données modifiées
• Vérification de plusieurs types de données
• Prise en charge de la vérification des données des règles personnalisées
• Obtenez des lignes de données avec une vérification illégale
• Prise en charge de l'annulation et du rétablissement
• Chaque style de cellule et nom de classe peuvent être personnalisés
• Utiliser le rendu local pour prendre en charge l'affichage de plus grandes quantités de données

Installer

 npm install vue-willtable --save

monter

Monté dans le monde entier

 import Vue from 'vue'
import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

Vue . component ( 'VueWilltable' , VueWilltable )

monté sur composant

 import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

export default {
  components : {
    VueWilltable
  }
} 

Exemples d'utilisation

< 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 >

données

this.$refs.willtable appelle la méthode setData pour mettre à jour l'intégralité des données de la table et réinitialiser les enregistrements de données historiques.

this.$refs.willtable appelle la méthode getData pour obtenir l'intégralité des données de la table.

v-model lie les valeurs

propriété

paramètre	illustrer	taper	Valeur facultative	valeur par défaut
colonnes	Description de la configuration des colonnes du tableau	Tableau	——	[]
hauteurmax	hauteur maximale de la table	chaîne/numéro	——	——
hauteur de ligne	hauteur de chaque rangée	chaîne/numéro	——	——
désactivé	Modification interdite	Booléen	——	vrai
afficherIcône	Afficher l'icône du type d'en-tête	Booléen	——	FAUX
Style de cellule	Méthode de rappel du style de cellule	Fonction ({ligne, colonne, rowIndex, columnIndex})	——	——
NomClasseCellule	La méthode de rappel du className de la cellule	Fonction ({ligne, colonne, rowIndex, columnIndex})	——	——
Cellule désactivée	Désactiver les cellules	Function({row, column, rowIndex, columnIndex}) => Booléen	——	() => faux
showAddRow	Afficher la fonction d'ajout de ligne	Booléen	——	FAUX
addRowAndCopy	Copiez la ligne de données précédente lors de l'ajout d'une ligne	Booléen	——	FAUX

événement

nom de l'événement	illustrer	paramètres de rappel
changement de sélection	Cet événement est déclenché lorsque la sélection change	sélection

méthode

nom de la méthode	illustrer	paramètre
obtenir des données	Utilisé pour obtenir des données et renvoyer les données actuelles de la table	——
setData	Utilisé pour définir les données et réinitialiser l'historique	données
getChangeData	Obtenir les lignes de données modifiées	——
getErrorRows	Obtenez des données et un index avec des erreurs de vérification	——
ajouter un élément	Ajouter une ligne de données en bas	article
ajouter une ligne	Ajouter une ligne	rowIndex, copyRow, données personnalisées
Supprimer les éléments	Pour la suppression par lots, le paramètre key est l'attribut d'identification unique de chaque ligne tel que id, et les valeurs sont un tableau d'attributs d'identification.	clé, valeur
setCellData	Définir les données de la cellule	rowIndex, columnIndex, valeur
plein écran	Affichage plein écran	——
quitterPlein écran	Quitter le plein écran	——

Propriétés des colonnes

paramètre	illustrer	taper	Valeur facultative	valeur par défaut
clé	Le nom du champ correspondant au contenu de la colonne	Chaîne	——	——
titre	Texte d'affichage de l'en-tête de colonne	Chaîne	——	——
largeur	largeur de colonne	Chaîne/Nombre	——	——
taper	Type de colonne	Chaîne	sélection/numéro/date/sélectionner/mois	——
format	Format des milliers de signes (pour le type de nombre)	Booléen	——	vrai
choix	sélectionnez l'option déroulante	Tableau	{ valeur : 'valeur', étiquette : 'texte affiché' }	——
fixé	Est-ce fixé sur le côté gauche ?	Booléen	——	FAUX
action	S'il faut activer le filtrage et le tri	Booléen	——	FAUX
désactivé	S'il faut interdire l'édition	Booléen	——	FAUX
nonVérifier	S'il faut désactiver la vérification	Booléen	——	FAUX
valider	Vérification personnalisée	Fonction (valeur)	——	——
entrée personnalisée	entrée personnalisée	Fonction ({ligne, colonne, rowIndex, columnIndex, valeur })	——	——

touche de raccourci

touche de raccourci	illustrer
Touches fléchées	Déplacer la zone d'édition
Ctrl+C	Coller
Ctrl+V	copie
Ctrl+A	Sélectionnez toutes les cellules
Ctrl+Z	Annuler
Ctrl+Y	refaire
Entrer	Édition de cellule/Édition de cellule complète
Supprimer, Retour arrière	supprimer

auteur

WillWu