Vue-Element implementiert das Hinzufügen, Löschen und Ändern von Daten in Tabellen

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="Datum" width="180"></el-table-column>
  <el-table-column prop="name" label="Tabelle" width="180"></el-table-column>
  <el-table-column prop="address" label="Adresse"></el-table-column>
  <el-table-column label="Vorgang">
    <template slot-scope="Umfang">
      <!-- Klicken Sie auf „Bearbeiten“, um die Bearbeitungsseite zum Bearbeiten der Tabellendaten aufzurufen-->
      <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Bearbeiten</el-button>
      <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Löschen</el-button>
    </Vorlage>
  </el-Tabellenspalte>
</el-Tabelle>

<!-- Mit dem Folgenden wird das Popup-Fenster beim Klicken auf die Schaltfläche „Hinzufügen“ festgelegt. Sie können Tabellen verschachteln, um die Popup-Tabelleninformationen anzuzeigen. Verwenden Sie das folgende :visible.sync, um zu steuern, ob es angezeigt wird oder nicht-->
<!-- Der von uns festgelegte Wert ist darin gebunden. Nach dem Ausfüllen fügen wir unseren neuen Wert in alle Daten auf der Seite ein-->
<el-dialog title="Benutzerinformationen" :visible.sync="dialogFormVisible">
  <!-- Verschachteln von el-form in el-dialog, um den Effekt einer Popup-Tabelle zu erzielen -->
  <el-form :model="form">
    <el-form-item label="Adresse" :label-width="FormLabelWidth">
      <el-input v-model="form.address" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="Name" :label-width="Formularlabelbreite">
      <el-input v-model="form.name" auto-complete="aus"></el-input>
    </el-form-item>
    <el-form-item label="Datum" :label-width="FormLabelBreite">
      <el-Datumsauswahl
        v-Modell="Formular.Datum"
        Typ="Datum"
        Platzhalter="Datum auswählen"
        Werteformat="jjjj-MM-tt"
      ></el-Datumsauswahl>
    </el-form-item>

    <el-form-item label="Geschlecht" :label-width="FormLabelBreite">
      <el-select v-model="form.region" placeholder="Geschlecht">
        <el-option label="Männlich" value="Männlich"></el-option>
        <el-option label="Option" value="Option"></el-option>
      </el-Auswahl>
    </el-form-item>
  </el-form>
  <div slot="Fußzeile" class="dialog-footer">
    <el-button @click="cancel">Abbrechen</el-button>
    <!-- Methode zum Auslösen der Aktualisierung festlegen -->
    <el-button type="primary" @click="update">OK</el-button>
  </div>
</el-dialog>

<Vorlage>
  <div class="basetable" v-loading="wird geladen" element-loading-text="Wird geladen">
    <!-- v-loading-Einstellungen werden geladen -->
    <div Klasse="Auswahlmenü">
      <el-date-picker v-model="value6" type="daterange" placeholder="Datumsbereich auswählen"></el-date-picker>
      <!-- Klicken, um die Add-Methode auszulösen-->
      <el-button type="primary" @click="add">Hinzufügen</el-button>
    </div>
    <div Klasse="TabelleHaupt">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Datum" width="180"></el-table-column>
        <el-table-column prop="name" label="Tabelle" width="180"></el-table-column>
        <el-table-column prop="address" label="Adresse"></el-table-column>
        <el-table-column label="Vorgang">
          <template slot-scope="Umfang">
            <!-- Klicken Sie auf „Bearbeiten“, um die Bearbeitungsseite zum Bearbeiten der Tabellendaten aufzurufen-->
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Bearbeiten</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Löschen</el-button>
          </Vorlage>
        </el-Tabellenspalte>
      </el-Tabelle>
    </div>
    <div Klasse="Seite">
      <el-pagination
        @size-change="Größenänderungsgriff"
        @current-change="AktuelleÄnderung handhaben"
        :current-page.sync="aktuelleSeite3"
        :Seitengröße="100"
        Layout = "Zurück, Pager, Weiter, Jumper"
        :Gesamt="1000"
      ></el-pagination>
    </div>
    <!-- Mit dem Folgenden wird das Popup-Fenster beim Klicken auf die Schaltfläche „Hinzufügen“ festgelegt. Sie können Tabellen verschachteln, um die Popup-Tabelleninformationen anzuzeigen. Verwenden Sie das folgende :visible.sync, um zu steuern, ob es angezeigt wird oder nicht-->
    <!-- Der von uns festgelegte Wert ist darin gebunden. Nach dem Ausfüllen fügen wir unseren neuen Wert in alle Daten auf der Seite ein-->
    <el-dialog title="Benutzerinformationen" :visible.sync="dialogFormVisible">
      <!-- Verschachteln von el-form in el-dialog, um den Effekt einer Popup-Tabelle zu erzielen -->
      <el-form :model="form">
        <el-form-item label="Adresse" :label-width="FormLabelWidth">
          <el-input v-model="form.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="Name" :label-width="Formularlabelbreite">
          <el-input v-model="form.name" auto-complete="aus"></el-input>
        </el-form-item>
        <el-form-item label="Datum" :label-width="FormLabelBreite">
          <el-Datumsauswahl
            v-Modell="Formular.Datum"
            Typ="Datum"
            Platzhalter="Datum auswählen"
            Werteformat="jjjj-MM-tt"
          ></el-Datumsauswahl>
        </el-form-item>

        <el-form-item label="Geschlecht" :label-width="FormLabelBreite">
          <el-select v-model="form.region" placeholder="Geschlecht">
            <el-option label="Männlich" value="Männlich"></el-option>
            <el-option label="Option" value="Option"></el-option>
          </el-Auswahl>
        </el-form-item>
      </el-form>
      <div slot="Fußzeile" class="dialog-footer">
        <el-button @click="cancel">Abbrechen</el-button>
        <!-- Methode zum Auslösen der Aktualisierung festlegen -->
        <el-button type="primary" @click="update">OK</el-button>
      </div>
    </el-dialog>
  </div>
</Vorlage>

<Skripttyp="text/ecmascript-6">
Standard exportieren {
  Daten() {
    zurückkehren {
      wird geladen: wahr,
      // Tabellendaten tableData: [
        {
          Datum: "2017-05-01",
          Name: "Soldat 76",
          Region: "Männlich",
          Adresse: "King's Avenue",
          Stadt: ""
        },
        {
          Datum: "2017-05-02",
          Name: "Genji",
          Region: "Männlich",
          Adresse: "Nepal",
          Stadt: ""
        },
        {
          Datum: "2017-05-03",
          Name: "Schwarze Lilie",
          Region: "Weiblich",
          Adresse: "Volskaya Industriegebiet",
          Stadt: ""
        },
        {
          Datum: "04.05.2017",
          Name: "Tracer",
          Region: "Weiblich",
          Adresse: "King's Avenue",
          Stadt: ""
        },
        {
          Datum: "2017-05-03",
          Name: "Zhaliya",
          Region: "Weiblich",
          Adresse: "Volskaya Industriegebiet",
          Stadt: ""
        },
        {
          Datum: "2017-05-03",
          Name: "Zenyatta",
          Region: "Männlich",
          Adresse: "Nepal",
          Stadt: ""
        },
        {
          Datum: "2017-05-03",
          Name: "Hanzo",
          Region: "Weiblich",
          Adresse: "Huamura",
          Stadt: ""
        }
      ],
      // Städteauswahldaten cityList: [
        { Name: "King's Row" },
        { name: "Nepal" },
        { Name: "Industriegebiet Volskaya" },
        { Name: "Huamura" },
        { name: "Nepal" },
        { name: "Mondbasis" }
      ],
      dialogFormVisible: false,
      formLabelWidth: "80px",
      // Legen Sie das Formular so fest, dass der Wert beim Hinzufügen des Formulars gebunden wird: {},
      Wert6: "",
      aktuelleSeite3: 1,
      aktuellerIndex: ""
    };
  },
  erstellt() {
    // Stelle die Callback-Funktion so ein, dass die Ladeanimation 1,5 Sekunden lang angezeigt wird setTimeout(() => {
      dies.laden = falsch;
    }, 1500);
  },
  Methoden: {
    Show Time() {
      this.$alert(this.value6, "Start- und Endzeit", {
        confirmButtonText: "Bestätigen",
        Rückruf: Aktion => {
          diese.$nachricht({
            Typ: "info",
            Meldung: „Angezeigt“
          });
        }
      });
    },
    // Die Möglichkeit, Daten hinzuzufügen, besteht darin, einige Werte separat festzulegen, um Funktionen hinzuzufügen. Diese Werte werden im Objekt festgelegt und dann wird das neu hinzugefügte Objekt in die Gesamtdaten eingefügt add() {
      dieses.Formular = {
        Datum: "",
        Name: "",
        Region: "",
        Adresse: ""
      };
      // Legen Sie das Dialogfeld fest, das nach dem Klicken auf die Schaltfläche angezeigt werden soll. this.dialogFormVisible = true;
    },
    aktualisieren() {
      // dieses.Formular.Datum = neu formatieren(dieses.Formular.Datum);
      //Sie können das Datumsformat in HTML festlegen//Senden Sie die Informationen, die wir zu den Gesamtdaten hinzugefügt haben this.tableData.push(this.form);
      this.dialogFormVisible = falsch;
    },
    handleEdit(index, zeile) {
      // Übergeben Sie den Index der Daten, um die Daten zu realisieren. echo this.form = this.tableData[index];
      dies.aktuellerIndex = Index;
      //Sichtbarkeit des Dialogfelds festlegen this.dialogFormVisible = true;
    },
    handleDelete(index, zeile) {
      // Richten Sie eine Funktion ähnlich der Konsolenart this.$confirm("Datei endgültig löschen, möchten Sie fortfahren?", "Prompt", { ein.
        confirmButtonText: "Bestätigen",
        cancelButtonText: "Abbrechen",
        Typ: „Warnung“
      })
        .then(() => {
          //Entfernen Sie die Daten an der entsprechenden Indexposition. Sie können die Zeile so einstellen, dass der Hintergrund zum Löschen der Daten aufgefordert wird this.tableData.splice(index, 1);
          diese.$nachricht({
            Typ: „Erfolg“,
            Meldung: "Erfolgreich gelöscht!"
          });
        })
        .fangen(() => {
          diese.$nachricht({
            Typ: "info",
            Nachricht: „Gelöscht“
          });
        });
    },
    stornieren() {
      // Beim Abbrechen einfach das Dialogfeld unsichtbar machen this.dialogFormVisible = false;
    },
    handleSizeChange(Wert) {
      console.log(`${val} Elemente pro Seite`);
    },
    handleCurrentChange(Wert) {
      console.log(`Aktuelle Seite: ${val}`);
    }
  }
};
</Skript>
<style lang="scss">
.Basistabelle {
  .tableMain {
    Marge: {
      oben: 10px;
    }
  }
  .Seite {
    schweben: links;
    Marge: {
      oben: 10px;
    }
  }
}
</Stil>