Der Prozess der Verwendung von vxe-table zum Erstellen bearbeitbarer Tabellen in Vue

npm installiere xe-utils@3 vxe-table@3

importiere „xe-utils“;
importiere VXETable aus „vxe-table“;
importiere „vxe-table/lib/style.css“;
​
Vue.use(VXETable);

<Vorlage>
    <vxe-Tabelle :align="allesAusrichten" :data="Tabellendaten">
        <vxe-table-column Typ="seq" Breite="60"></vxe-table-column>
        <vxe-table-column Feld="Name" Titel="Name"></vxe-table-column>
        <vxe-table-column field="desc" title="Beschreibung"></vxe-table-column>
        <vxe-table-column field="link" title="Link"></vxe-table-column>
    </vxe-Tabelle>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                allAlign: null,
                Tabellendaten: [
                    {
                        Name: "html",
                        Beschreibung: 'Hypertext Markup Language',
                        Link: „https://www.runoob.com/html/html-tutorial.html“
                    },
                    {
                        Name: "css",
                        Beschreibung: 'Cascading Style Sheets',
                        Link: „https://www.runoob.com/css/css-intro.html“
                    },
                    {
                        Name: "js",
                        desc: 'JavaScript',
                        Link: „https://www.runoob.com/js/js-tutorial.html“
                    }
                ]
            }
        }
    }
</Skript>

<Vorlage>
    <!--Edit-Config-Konfiguration zur Tabelle hinzufügen-->
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
        <!--Reformieren Sie die Zelle vxe-table-column und verwenden Sie edit-render, um die Bearbeitungseigenschaften zu konfigurieren--->
        <vxe-table-column title="Beschreibung" width="180" fixed="left" field="desc"
                          :edit-render="{name: 'Eingabe', attrs: {typ: 'Text'}}">
        </vxe-table-column>
    </vxe-Tabelle>
</Vorlage> 

<Vorlage>
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
        <!--Der einzige Unterschied zwischen Edit-Render und Eingabefeldbearbeitung ist die Konfiguration von Edit-Render. Die neue Optionsauswahl wird in Daten hinzugefügt--->
        <vxe-table-column title="Ob angezeigt werden soll" width="180" field="isShow"
                          :edit-render="{name: 'Auswählen', Optionen: Auswahl, optionProps: {Wert: 'Status', Bezeichnung: 'Bezeichnung'}}">
        </vxe-table-column>
    </vxe-Tabelle>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                allAlign: null,
                Tabellendaten: [
                    {
                        Name: "html",
                        Beschreibung: 'Hypertext Markup Language',
                        Link: 'https://www.runoob.com/html/html-tutorial.html',
                        isShow: 1
                    }
                    //Mehrere Daten auslassen········
                ],
                Auswahl: [
                    {status: 1, label: 'Ja'},
                    {status: 0, label: 'Nein'}
                ]
            }
        }
    }
</Skript>

<vxe-table-column Feld="Name" Breite="120" Titel="Name"
                  :edit-render="{name: 'Eingabe', attrs: {typ: 'Text'}}">
    <!--Verwenden Sie #header, um die Kopfzeile anzupassen -->
    <Vorlage #header>
        <span>Name</span>
        <span style="font-size: 12px; color: #ccc">Technologie</span>
    </Vorlage>
    <!--Verwenden Sie #default, um den Inhalt anzupassen-->
    <Vorlage #default="{row}">
        <span>Technologiename</span>
        <span>{{row.name}}</span>
    </Vorlage>
    <!--Verwenden Sie #edit, um die Bearbeitung anzupassen -->
    <Vorlage #edit="{row}">
        <p>Technologiename</p>
        <Eingabetyp="Text" v-Modell="Zeile.name" Klasse="vxe-default-input">
    </Vorlage>
</vxe-table-column>

<Vorlage>
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"
               @edit-closed="Daten aktualisieren">
        <vxe-table-column title="Ob angezeigt werden soll" width="180" field="isShow"
                          :edit-render="{name: 'Auswählen', Optionen: Auswahl, optionProps: {Wert: 'Status', Bezeichnung: 'Bezeichnung'}}">
        </vxe-table-column>
    </vxe-Tabelle>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            // Weglassen...
        },
        Methoden: {
            updateData ({ Zeile, Spalte }) {
                // Die Schnittstelle für Hintergrundaktualisierungen akzeptiert ein Datenelement, übergeben Sie also einfach die Zeile console.log(row);
            }
        }
    }
</Skript>

editClosedEvent ({ Zeile, Spalte }) {
    const $table = this.$refs.xTable
    const Feld = Spalte.Eigenschaft
    const cellValue = Zeile[Feld]
    // Feststellen, ob der Zellenwert geändert wurde if ($table.isUpdateByRow(row, field)) {
        setzeTimeout(() => {
            dies.$XModal.message({
                Inhalt: „Teilweises Speichern erfolgreich!“ ${Feld}=${Zellenwert}`,
                Status: „Erfolgreich“
            })
            // Zelle teilweise in den gespeicherten Zustand aktualisieren $table.reloadRow(row, null, field)
        }, 300)
    }
}