vue willtable

vue-willtable bearbeitbare Tabellenkomponente

Englisches Dokument

Bearbeitbare Tabellenkomponente, die für Vue geeignet ist, mehrere Tastenkombinationen unterstützt und die Excel-Bedienerfahrung simuliert

Demo hier: https://demo.willwuwei.com/willtable/

Ein Echtzeit-Sharing- und Bearbeitungsformularsystem für mehrere Personen, das auf der Grundlage dieser Komponente implementiert wurde:

Besuchen Sie die URL

Front-End-Projektadresse

Backend-Projektadresse

Screenshot

Merkmal

• Tischbreitenverstellung
• Tabellenspalten behoben
• Datenfilterung und -sortierung
• Zeilenmehrfachauswahl
• Stapellöschung und Kopieren und Einfügen
• Mit Excel kopieren und einfügen
• Daten-Dropdown-Kopie
• Die Tabelle kann beim Herunterziehen automatisch scrollen, um Zellen zu kopieren oder mehrfach auszuwählen.
• Geänderte Datenzeilen abrufen
• Überprüfung mehrerer Datentypen
• Unterstützt die Überprüfung benutzerdefinierter Regeldaten
• Rufen Sie Datenzeilen mit illegaler Überprüfung ab
• Unterstützt Rückgängigmachen und Wiederherstellen
• Jeder Zellenstil und Klassenname kann angepasst werden
• Verwenden Sie lokales Rendering, um die Anzeige größerer Datenmengen zu unterstützen

Installieren

 npm install vue-willtable --save

montieren

Weltweit montiert

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

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

Vue . component ( 'VueWilltable' , VueWilltable )

am Bauteil montiert

 import VueWilltable from 'vue-willtable'

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

export default {
  components : {
    VueWilltable
  }
} 

Anwendungsbeispiele

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

Daten

this.$refs.willtable ruft die setData-Methode auf, um die gesamten Tabellendaten zu aktualisieren und historische Datensätze zurückzusetzen.

this.$refs.willtable ruft die Methode getData auf, um die gesamten Tabellendaten abzurufen.

v-model bindet Werte

Eigentum

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Spalten	Konfigurationsbeschreibung von Tabellenspalten	Array	——	[]
maximale Höhe	Maximale Tischhöhe	Zeichenfolge/Zahl	——	——
rowHeight	Höhe jeder Reihe	Zeichenfolge/Zahl	——	——
deaktiviert	Bearbeitung verboten	Boolescher Wert	——	WAHR
showIcon	Symbol für Kopfzeilentyp anzeigen	Boolescher Wert	——	FALSCH
cellStyle	Rückrufmethode des Zellenstils	Funktion({Zeile, Spalte, ZeilenIndex, SpaltenIndex})	——	——
cellClassName	Die Rückrufmethode des Klassennamens der Zelle	Funktion({Zeile, Spalte, ZeilenIndex, SpaltenIndex})	——	——
deaktivierte Zelle	Zellen deaktivieren	Funktion({Zeile, Spalte, ZeilenIndex, SpaltenIndex}) => Boolean	——	() => falsch
showAddRow	Funktion zum Hinzufügen einer Zeile anzeigen	Boolescher Wert	——	FALSCH
addRowAndCopy	Kopieren Sie beim Hinzufügen einer Zeile die vorherige Datenzeile	Boolescher Wert	——	FALSCH

Ereignis

Veranstaltungsname	veranschaulichen	Rückrufparameter
Auswahl-Änderung	Dieses Ereignis wird ausgelöst, wenn sich die Auswahl ändert	Auswahl

Verfahren

Methodenname	veranschaulichen	Parameter
getData	Wird verwendet, um Daten abzurufen und die aktuellen Tabellendaten zurückzugeben	——
setData	Wird zum Festlegen von Daten und zum Zurücksetzen des Verlaufs verwendet	Daten
getChangeData	Geänderte Datenzeilen abrufen	——
getErrorRows	Rufen Sie Daten ab und indizieren Sie sie mit Verifizierungsfehlern	——
addItem	Fügen Sie unten eine Datenzeile hinzu	Artikel
addRow	Zeile hinzufügen	rowIndex, copyRow, customData
RemoveItems	Beim Batch-Löschen ist der Parameterschlüssel das eindeutige Identifikationsattribut jeder Zeile, z. B. die ID, und die Werte sind ein Array von Identifikationsattributen.	Schlüssel, Wert
setCellData	Zelldaten festlegen	rowIndex, columnsIndex, Wert
Vollbild	Vollbildanzeige	——
ExitFullscreen	Verlassen Sie den Vollbildmodus	——

Spalteneigenschaften

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Schlüssel	Der Feldname, der dem Spalteninhalt entspricht	Zeichenfolge	——	——
Titel	Anzeigetext der Spaltenüberschrift	Zeichenfolge	——	——
Breite	Spaltenbreite	Zeichenfolge/Zahl	——	——
Typ	Spaltentyp	Zeichenfolge	Auswahl/Nummer/Datum/Auswahl/Monat	——
Format	Tausenderzeichenformat (für Zahlentyp)	Boolescher Wert	——	WAHR
Optionen	Wählen Sie die Dropdown-Option aus	Array	{ value: 'value', label: 'display text' }	——
behoben	Ist es auf der linken Seite befestigt?	Boolescher Wert	——	FALSCH
Aktion	Ob das Filtern und Sortieren aktiviert werden soll	Boolescher Wert	——	FALSCH
deaktiviert	Ob die Bearbeitung verboten werden soll	Boolescher Wert	——	FALSCH
noVerify	Ob die Überprüfung deaktiviert werden soll	Boolescher Wert	——	FALSCH
bestätigen	Benutzerdefinierte Überprüfung	Funktion(Wert)	——	——
benutzerdefinierte Eingabe	benutzerdefinierte Eingabe	Funktion({ Zeile, Spalte, Zeilenindex, Spaltenindex, Wert })	——	——

Tastenkombination

Tastenkombination	veranschaulichen
Pfeiltasten	Bearbeitungsfeld verschieben
Strg + C	Paste
Strg+V	Kopie
Strg+A	Wählen Sie alle Zellen aus
Strg+Z	Stornieren
Strg+Y	wiederholen
Eingeben	Zellbearbeitung/Vollständige Zellbearbeitung
Löschen, Rücktaste	löschen

Autor

WillWu