Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten

Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten

Vorwort

Wenn wir PC-seitige Projekte mit Formularen entwickeln, insbesondere CRM-Systeme, stoßen wir häufig auf solche Anforderungen. Benutzer müssen die Anzeigespalten entsprechend den Einstellungen anpassen. Ich habe die offizielle Dokumentation des Elements geprüft und keine solche Komponente gefunden. Daher habe ich manuell eine einfache Komponente gekapselt, in der Hoffnung, dass sie hilfreich sein wird, wenn Sie solche Anforderungen entwickeln.

Rendern

Das spezifische Wirkungsdiagramm ist wie folgt:

Anzeigespalten anpassen (Sie können per Drag & Drop sortieren, zum Auswählen klicken und zum Abbrechen erneut klicken)

Sortieren/anzeigen/ausblenden jeder Spalte entsprechend der vom Benutzer festgelegten Felder

setTable-Komponente

Um die Drag & Drop-Sortierung zu implementieren, müssen wir zunächst ein Plug-In verwenden:

npm installiere vuedraggable -S

Der spezifische Komponentencode lautet wie folgt. Im Code wurden detaillierte Kommentare geschrieben, daher werde ich hier nicht näher darauf eingehen. .

setTable.vue

<Vorlage>
  <div>
    <el-dialog title="Benutzerdefinierte Anzeigespalte" :visible.sync="dialogVisible" width="50%">
      <div Klasse="Menüs auswählen" Menüs-Box">
        <p class="menus-title">Ziehen Sie die Blöcke, um die Anzeigereihenfolge anzupassen</p>
        <div Klasse="Menüinhalte">
          <draggable v-model="ausgewählt" @update="datadragEnd" :options="{animation:500}">
            <Übergangsgruppe>
              <div v-for="Menü im ausgewählten" :key="Menü.Feld" class="Drag-Item-Element">{{Menü.Name}}</div>
            </Übergangsgruppe>
          </ziehbar>
        </div>
      </div>
      <div Klasse="Menüs-Container Menüs-Box" v-if="Felder.Länge">
        <p class="menus-title">Anzeigespalten auswählen</p>
        <div Klasse="Menüinhalte">
          <div
            Klasse="Artikel"
            :Klasse="{active:menu.active}"
            v-for="Menü der Felder"
            :Schlüssel="Menü.Feld"
            @click="beiAuswahl(Menü)"
          >{{menu.name}}</div>
        </div>
      </div>
      <span slot="Fußzeile" class="dialog-footer">
        <el-button @click="dialogVisible = false">Abbrechen</el-button>
        <el-button type="primary" @click="onSave">OK</el-button>
      </span>
    </el-dialog>
  </div>
</Vorlage>
<Skript>
importiere ziehbares Objekt aus „vuedraggable“;
importiere { getFields, setFields, getFieldControl } von "@/api/user";
Standard exportieren {
  Name: "setTable",
  injizieren: ["neu laden"],
  Requisiten: {
    Typen: String,
  },
  Komponenten:
    ziehbar,
  },
  Daten() {
    zurückkehren {
      dialogVisible: false,
      Felder: [], //Alle Menüs ausgewählt: [], //Ausgewähltes Menü};
  },
  betrachten:
    ausgewählt: {
      handler(alterWert, neuerWert) {
        wenn (diese.Felder.Länge === 0) {
          zurückkehren;
        }
        neuerWert.map((i) => {
          diese.fields.map((j) => {
            wenn (i.Feld === j.Feld) {
              // Wenn das gleiche Feld bereits im ausgewählten Array vorhanden ist, ist „active“ wahr. „Active“ wird hauptsächlich verwendet, um den ausgewählten/nicht ausgewählten Stil aller Menüs zu steuern. j.active = true;
            }
          });
        });
      },
    },
  },
  montiert() {
    //Um zu verhindern, dass Firefox beim Ziehen eine neue Registerkarte öffnet document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  Methoden: {
    asynchron getData() {
      // Alle Menüdaten abrufen const { data: fields } = await getFields({
        Typen: diese.Typen,
      });
      Felder.map((item) => {
        // Da der Server das aktive Feld nicht zurückgibt, muss jedem Datenelement ein aktives Feld hinzugefügt werden, um den ausgewählten Stil zu steuern. item.active = false;
      });
      diese.felder = Felder;
    },
    async getFields() {
      // Das vom Benutzer ausgewählte Menü abrufen, damit beim erneuten Öffnen der Einstellungen das zuletzt ausgewählte Menü auf der Seite angezeigt werden kann, damit der Benutzer es erneut ändern kann. let fields = await getFieldControl({
        Konto-ID: diese.$store.state.user.token.account_id,
        Benutzer-ID: this.$store.state.user.token.userid,
        Typen: diese.Typen,
      });
      dies.$nextTick(() => {
        this.selected.push(...Felder.Daten);
      });
    },
    async beiSpeichern() {
      // Ausgewähltes Menü speichern await setFields({
        Konto-ID: diese.$store.state.user.token.account_id,
        Benutzer-ID: this.$store.state.user.token.userid,
        Typen: diese.Typen,
        Inhalt: this.selected,
      });
      this.reload(); //Seite aktualisieren},
    asynchron öffnen() {
      // Beim Öffnen des Einstellungsfensters die Daten löschen und die aktuellsten Daten erneut anfordern this.fields = [];
      dies.ausgewählt = [];
      this.dialogVisible = true;
      warte auf dies.getData();
      warte auf this.getFields();
    },
    beiAuswahl(Element) {
      // Bestimmen Sie, ob im ausgewählten Menü ein ausgewähltes Menü vorhanden ist. let findex = this.selected.findIndex((i) => {
        Rückgabewert: Element.Feld === i.Feld;
      });
      wenn (findex === -1) {
        // Wenn im Menü kein ausgewähltes Element vorhanden ist, fügen Sie es dem letzten Element hinzu. this.selected.push(item);
      } anders {
        // Wenn es bereits ausgewählt ist, sollte es beim Anklicken entfernt werden und „active“ sollte auf „false“ gesetzt werden, um den ausgewählten Stil zu ändern. item.active = false;
        dies.ausgewählt.splice(findex, 1);
      }
    },
    datadragEnd(evt) {
      // Dragsort evt.preventDefault();
    },
  },
};
</Skript>
<style lang="scss" scoped>
/* Alle Menüs */
.menus-container {
  Rand oben: 20px;
  .menus-content {
    .Artikel {
      Farbe: #575757;
      Hintergrund: rgba(238, 238, 238, 1);
      Rand: 1px durchgezogen rgba(220, 220, 220, 1);
      Rahmenradius: 2px 0px 0px 2px;
    }
  }
}
/* Allgemeiner Menüstil*/
.Menüs-Box {
  .Menütitel {
    Rand oben: 10px;
    Zeilenhöhe: 32px;
  }
  .menus-content {
    Anzeige: Flex;
    Flex-Wrap: Umwickeln;
    .Artikel {
      Cursor: Zeiger;
      Anzeige: Inline-Flex;
      Elemente ausrichten: zentrieren;
      Inhalt ausrichten: zentriert;
      Polsterung: 8px;
      Rand: 10px;
      Rahmenradius: 3px;
    }
    .aktiv {
      Farbe: #fff;
      Hintergrund: rgba(72, 153, 229, 1);
      Rahmenradius: 2px 0px 0px 2px;
    }
  }
}

/* Ausgewähltes Menü */
.Menüs auswählen {
  .menus-content {
    .Artikel {
      Rand: 0px;
      Randradius: 0;
      Hintergrund: rgba(255, 255, 255, 1);
      Rand: 1px durchgezogen rgba(220, 220, 220, 1);
    }
  }
}
</Stil>

verwenden

Die spezifische Verwendung ist wie folgt. Unnötige Geschäftscodes wurden hier ausgeblendet und nur die Kernimplementierungscodes werden veröffentlicht, um zu vermeiden, dass alle in die Irre geführt werden.

<Vorlage>
  <div>
    <el-Tabelle
      ref="mehrereTabelle"
      :data="Tabellendaten"
      Höhe="60vh"
      :row-class-name="Tabellenzeilenklassenname"
      @selection-change="Auswahländerungsgriff"
      @row-click="Lesen"
    >
      <el-table-column Typ="Auswahl" min-width="55px;"></el-table-column>
      <template v-for="(Element,Index) von Feldern">
        <el-table-column
          v-if="Artikel.Feld==='Name'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Geschlecht'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="scope">{{scope.row.gender===1?'男':'女'}}</template>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='corp_full_name'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='Firmenname'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "12 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='up_date'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='Position'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='remark_mobiles'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Quellenname'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Adresse'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='detail_address'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='Beschreibung'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Bemerkung'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Datensatzinhalt'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='eigentümername'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='follow_time'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div v-if="scope.row.follow_time===scope.row.createtime">Keine</div>
            <div v-else>{{scope.row.follow_time | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='nächste_Folgezeit'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div v-if="scope.row.next_follow_time===0">Keine</div>
            <div v-else>{{scope.row.next_follow_time | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='Erstellungszeit'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div>{{scope.row.createtime | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='updatetime'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div>{{scope.row.updatetime | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='ist_Datensatz'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div>{{scope.row.is_record === 0 ? 'Nicht weiterverfolgt' : 'Bereits weiterverfolgt' }}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="Artikel.Feld==='if_Datensatz'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
      </Vorlage>
      <el-table-column label="Vorgang" min-width="8%;">
        <template slot-scope="Umfang">
          <el-button @click="handleRead(scope.row)" type="text">Details</el-button>
        </Vorlage>
      </el-Tabellenspalte>
      <el-table-column align="right" min-width="4%;">
        <template slot="header">
          <i class="iconfont icongengduo" @click="onMore"></i>
        </Vorlage>
      </el-Tabellenspalte>
    </el-Tabelle>
    <set-table ref="Einstellung" types="leads"></set-table>
  </div>
</Vorlage>

<Skript>
importiere setTable aus "@/components/setTable";
importiere { getFieldControl } von "@/api/user";
Standard exportieren {
  Name: "Hinweise",
  Komponenten:
    Tabelle festlegen,
  },
  Daten() {
    zurückkehren {
      Felder: [],
    };
  },
  asynchron gemountet() {
    warte auf this.getFields();
    diese.Hinweise();
  },
  Methoden: {
    async getFields() {
      let fields = warte auf getFieldControl({
        Konto-ID: diese.$store.state.user.token.account_id,
        Benutzer-ID: this.$store.state.user.token.userid,
        Typen: „Leads“,
      });
      diese.Felder = Felder.Daten;
    },
    aufMehr() {
      dies.$refs.setting.open();
    },
  },
};
</Skript>

Tatsächlich können Sie hier auch eine feste Spaltenbreite festlegen oder die spezifische Größe über den Server zurückgeben. Auf diese Weise müssen Sie nicht so viele if-Anweisungen schreiben, was bequemer und prägnanter ist.

Abschluss

Tatsächlich kam mir diese Anforderung ziemlich kompliziert vor, als ich sie zum ersten Mal erhielt, insbesondere weil ich die Formularspalten ziehen und entsprechend der verschiedenen vom Server zurückgegebenen Felder sortieren musste. Aber insgesamt war es nicht so problematisch, wie ich dachte. Wenn Sie auf ein Bedürfnis stoßen, denken Sie nicht zu viel darüber nach, sondern probieren Sie es unbedingt zuerst aus, vielleicht ist es nicht so schwierig, wie Sie denken.

Dies ist das Ende dieses Artikels über benutzerdefinierte Vue-Tabellenspalten. Weitere relevante benutzerdefinierte Vue-Tabellenspalten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • VUE2.0+ElementUI2.0 Tabelle el-table implementiert Header-Erweiterung el-tooltip
  • Vue+Element – ​​Tutorial für benutzerdefinierte vertikale Tabellenüberschriften
  • Vue implementiert benutzerdefinierte Tabellentool-Erweiterung

<<:  Funktionsweise von SQL-SELECT-Datenbankabfragen

>>:  Detaillierte grafische Erklärung zur Installation der MySQL-Datenbank und zur Konfiguration eines Java-Projekts unter Linux

Artikel empfehlen

Implementierung eines einfachen Studenteninformationsmanagementsystems auf Basis von VUE

Inhaltsverzeichnis 1. Hauptfunktionen 2. Umsetzun...

JavaScript implementiert die Anzeige einer Dropdown-Box, wenn die Maus darüber bewegt wird

In diesem Artikel wird der spezifische JavaScript...

Detaillierte Erläuterung der Installation von jdk1.8 und der Konfiguration von Umgebungsvariablen in einer Linux-ähnlichen Umgebung

Die Konfiguration ist sehr einfach, aber ich muss...

FastDFS- und Nginx-Integration zur Codeanalyse

FastDFS- und Nginx-Integration: Der Tracker wird ...

Detaillierte Schritte für deepin20 zur Installation von NVIDIA Closed-Source-Treibern

Schritt 1: Installieren Sie den tiefen "Graf...

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Als Front-End-Ingenieure müssen wir mit dem IE ve...

So führen Sie eine reibungslose if-Beurteilung in js durch

Inhaltsverzeichnis Vorwort Code-Implementierung I...

Detaillierte Erläuterung der Wissenspunkte zum Umschalten zwischen MySQL MGR-Einzelmaster- und Multimastermodus

Ausführung der Hauptbibliothek DATENBANK ERSTELLE...

So fügen Sie einer Tabelle in SQL Felder und Kommentare hinzu

1. Felder hinzufügen: Tabelle Tabellennamen änder...

Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm

Es ist sehr einfach, eine Scala-Umgebung in Linux...

Codebeispiele für die Dekomprimierung, Änderung und andere Betriebsmethoden von Linux-Deb-Paketen

Aus verschiedenen Gründen müssen Sie manchmal den...

Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben

Guter HTML-Code ist die Grundlage einer schönen W...

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac

Inhaltsverzeichnis Installieren Sie MySQL Konfigu...

Logrotate implementiert alle zwei Stunden die Catalina.out-Protokollrotation

1. Einführung in das Logrotate-Tool Logrotate ist...

Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)

Der Meta-Tag ist ein Hilfstag im Head-Bereich der...