vue jsx table
1.0.0
Dokumentationsbeispiel
Diese Komponente basiert auf der sekundären Entwicklung der Elementtabelle und basiert auf tatsächlichen Geschäftsfunktionen. Sie kapselt häufig verwendete Funktionen, generiert Tabellen durch Konfiguration und implementiert mehrstufige Header- Erweiterungselemente, benutzerdefinierte Header- Funktionen usw.
Element-ui muss vor der Verwendung in das Projekt eingeführt werden
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > Für die Tabellenkonfiguration sind die Optionen columns und tableData erforderlich.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,Wenn Sie untergeordnete Elemente auf eine Spalte festlegen, kann der Gruppenkopf gerendert werden.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Renderoptionen für Spalte, Funktion(Zeile, Spalte, $index) festlegen
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , Sie müssen nur type:expand für das Spaltenkonfigurationselement festlegen. Der erweiterte Inhalt kann Slot oder Render verwenden. Wenn Slot und Render gleichzeitig konfiguriert sind, wird Slot ignoriert.
{
type : 'expand' ,
slot : 'expand' ,
} , Sie müssen lediglich „solt:''“ für das Spaltenkonfigurationselement festlegen, und „slot“ ist der Name des Steckplatzes.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , Sie müssen nur renderHeader für das Spaltenkonfigurationselement festlegen. renderHeader ist die native Konfiguration von element-ui (Offiziell wird die Verwendung der Render-Header-Funktion für die Spalte nicht empfohlen. Es wird eine Eingabeaufforderung auf der Konsole angezeigt, was peinlich ist. Sie können auch Slots verwenden, indem Sie das Element „slotHeader“ konfigurieren.) dass der Slot-Name nicht wiederholt werden kann. Definieren Die Slot-Konfiguration wurde in der Vorlagendeklaration definiert
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , Über den Solt-Slot können Sie auch die Renderfunktion zum Rendern von Komponenten verwenden
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >Alle Tabellenattribute werden durch v-bind="$attrs" implementiert, zusätzliche Tabellenattribute:
| Parameter | veranschaulichen | Typ | Standardwert |
|---|---|---|---|
| Spalten | Tabellenspalten | Array | [] |
| columnsKeyName | Der Schlüssel der Spalte. Wenn Sie das Filteränderungsereignis verwenden müssen, benötigen Sie dieses Attribut, um zu identifizieren, um welche Spalte es sich bei der Filterbedingung handelt (Spaltenschlüssel der Tabellenspaltenattribute). | Zeichenfolge | - |
| ausrichten | Ausrichtung | Zeichenfolge | links |
| showPagination | Ob Paging-Steuerelemente angezeigt werden sollen | Boolescher Wert | WAHR |
| aktuelle Seite | Die aktuelle Seite des aktuellen Paging-Steuerelements | Nummer | 1 |
| Seitengrößen | pageSizes von Paging-Steuerelementen | Array | [10, 20, 30, 50] |
| Seitengröße | pageSize der Paging-Steuerung | Array | [] |
| Layout | Layout der Paging-Steuerung | Zeichenfolge | 'Größen, Vorheriger, Pager, Nächster, Gesamt' |
| gesamt | insgesamt Paging-Steuerung | Nummer | 0 |
| paginationStyle | Der Stil des Paging-Steuerelements | Objekt | - |
| showOverflowTooltip | Zeigen Sie den Tooltip an, wenn der Inhalt zu lang ist und ausgeblendet ist. Wenn die Spalte nicht separat mit showOverflowTooltip konfiguriert ist, verwenden Sie dieses Attribut. | Boolescher Wert | WAHR |
| showTableSetting | Tabelleneinstellungen anzeigen | Boolescher Wert | FALSCH |
| hideColumns | Spalten- und Beschriftungsnamen, die ausgeblendet werden müssen. In einigen Szenarien müssen ausgeblendete Spalten basierend auf bestimmten Bedingungen angezeigt werden. | Array | [] |
| benutzerdefinierteKlasse | Benutzerdefinierte Stilklasse | Array | ['vue-jsx-table-wrapper'] |
Alle Tabellenereignisse werden durch v-on="$listeners" implementiert, zusätzliche Tabellenereignisse:
| Parameter | veranschaulichen | Typ | Standardwert |
|---|---|---|---|
| Größenänderung | Dieses Ereignis wird durch Änderungen bei Seitenwechsel und Stromwechsel ausgelöst. Es wird hinzugefügt, um Seitenwechsel zu erleichtern. | Funktion | 'function({pageSize: 10,currentPage: 1,}) {}' |
| Größenänderung | Wird ausgelöst, wenn sich die Seitengröße ändert | - | - |
| aktuelle-Änderung | Wird ausgelöst, wenn sich currentPage ändert | - | - |
| Parameter | veranschaulichen | Typ | Standardwert |
|---|---|---|---|
| Stütze | Der Feldname, der dem Spalteninhalt entspricht | Zeichenfolge | - |
| Slot | Der Slot-Name der Spalte (beachten Sie, dass der Slot-Name nicht wiederholt werden kann, wenn die Tabelle verschachtelt ist, Slot-Geltungsbereich ({ row, $index })) | Zeichenfolge | - |
| Etikett | Angezeigter Titel | Zeichenfolge | - |
| Breite | Entsprechende Spaltenbreite | Nummer | - |
| showOverflowTooltip | Tooltip anzeigen, wenn der Inhalt zu lang ist und ausgeblendet wird | Boolescher Wert | - |
| behoben | Unabhängig davon, ob die Spalte links oder rechts fixiert ist (wahr, links, rechts), bedeutet wahr, dass sie links fixiert ist | Zeichenfolge, boolescher Wert | - |
| machen | jsx-Rendering-Funktion | Funktion | render(Zeile, Spalte, $index) |
| Typ | Auswahl/Index/Erweitern | Zeichenfolge | - |
| renderHeader | Funktion, die für die Darstellung des Tabellenkopfes und des Spaltentitels im Beschriftungsbereich verwendet wird | Funktion (Spalte, Bereich}), Spalte ist das Konfigurationselement und Bereich ist der Bereich der nativen Komponente. (Dieses Attribut ist kein nativer Parameter) | - |
| cellredstar | Ob vor dem Kopftext ein rotes Sternzeichen eingefügt werden soll | Boolescher Wert | FALSCH |
| sortierbar | Ob die entsprechende Spalte sortiert werden kann. Wenn sie auf „benutzerdefiniert“ eingestellt ist, bedeutet dies, dass der Benutzer eine Remote-Sortierung durchführen möchte und auf das Sortieränderungsereignis der Tabelle warten muss. | boolean, string (true, false, 'custom') | FALSCH |
| Formatierer | Wird zum Formatieren von Inhalten verwendet (Element-UI-Originalattribut) | Funktion (Zeile, Spalte, Zellwert, Index) | - |
| wählbar | Es gilt nur für Spalten mit type=selection. Der Typ ist Function. Der Rückgabewert von Function wird verwendet, um zu bestimmen, ob die CheckBox dieser Zeile überprüft werden kann. | Funktion(Zeile, Index) | - |
| showHeaderTooltip | Ob die Informationen zur Kopieraufforderung angezeigt werden, wenn die Maus über den Tabellenkopf bewegt wird | Boolescher Wert | - |
| headerTooltipText | Die Kopfzeile zeigt den Inhalt der Kopierinformationen an | Zeichenfolge | - |
