vue realisiert die Anpassung der Spaltenbreite von el-table perfekt

Hintergrund

Element UI ist ein beliebtes Vue.js-UI-Framework auf dem PC. Seine Komponentenbibliothek kann grundsätzlich die meisten gängigen Geschäftsanforderungen erfüllen. Manchmal gibt es jedoch stark individuelle Anforderungen, die die Komponenten selbst möglicherweise nicht erfüllen können. Ich bin kürzlich bei einem Projekt darauf gestoßen.

Viele Seiten erfordern die Tabellenkomponente el-table. Wenn für „el-table-column“ keine Breite angegeben ist, wird sie standardmäßig gleichmäßig auf die verbleibenden Spalten verteilt. Wenn bei vielen Spalten die Breite der el-table auf den Container beschränkt ist, wird der Inhalt in der Zelle umbrochen. Erzwingen Sie keinen Zeilenumbruch. Der Inhalt wird entweder innerhalb der Zelle gescrollt, läuft über oder wird abgeschnitten.

Der gewünschte Effekt des Produkts ist: Der Inhalt wird einzeilig angezeigt, der Spaltenabstand ist konsistent und die Tabelle ragt über den Container hinaus, um horizontales Scrollen zu ermöglichen. el-table-column unterstützt das Festlegen einer festen Breite, die diese Anforderung erfüllen kann, wenn die Inhaltsbreite vorhersehbar ist. Das Problem besteht darin, die Spaltenbreite dynamisch an die Breite des Inhalts anzupassen. Ich habe eine solche Option in der offiziellen Dokumentation nicht gefunden, wahrscheinlich weil die Komponente selbst sie nicht unterstützt.

Technische Lösung

Daher habe ich über eine Lösung nachgedacht, um die Inhaltsbreite dynamisch zu berechnen. Einige Leute haben diese Idee online erwähnt und der Ansatz besteht darin, die Breite basierend auf der Anzahl der Zeichen im Inhalt zu berechnen. Dieser Ansatz weist mehrere Einschränkungen auf:

• Der Inhalt muss Text sein
• Verschiedene Zeichen haben unterschiedliche Breiten und die Abrechnungsergebnisse sind nicht genau genug
• Daten müssen vor dem Rendern bearbeitet werden, was der Entkopplung nicht förderlich ist

Ich habe eine andere Idee übernommen, nämlich die Inhaltsbreite dynamisch zu berechnen, allerdings basierend auf der tatsächlich gerenderten DOM-Elementbreite, wodurch die drei oben genannten Probleme gelöst werden können.

Wie geht das konkret? Durch Betrachten der gerenderten DOM-Elemente wird festgestellt, dass die Kopfzeile und der Inhalt der El-Tabelle jeweils eine native Tabelle verwenden und die Breite jeder Spalte durch Colgroup festgelegt wird. Beginnen wir hier. Der Name-Attributwert von col stimmt mit dem Klassenwert des entsprechenden td überein. Auf diese Weise können wir alle Zellen der entsprechenden Spalte durchlaufen, die Zelle mit der größten Breite finden und ihre Inhaltsbreite plus einen Rand als Breite der Spalte verwenden.

Konkrete Umsetzung

Wie berechnet man die Inhaltsbreite? Dies ist ein relativ kritischer Schritt. Nach dem Rendern hat jede Zelle eine .cell-Klasse, die so eingestellt ist, dass keine Zeilenumbrüche mit white-space: nowrap; overflow: auto; zulässig sind. Der Inhalt kann gescrollt werden, wenn er das Limit überschreitet, und display: inline-block; wird so eingestellt, dass die tatsächliche Inhaltsbreite berechnet wird. Auf diese Weise kann die endgültige Breite über die scrollWidth-Eigenschaft des .cell-Elements ermittelt werden.

Funktion Spaltenbreite anpassen(Tabelle) {
  const colgroup = table.querySelector("colgroup");
  const colDefs = [...colgroup.querySelectorAll("col")];
  colDefs.forEach((col) => {
    const clsName = col.getAttribute("name");
    const Zellen = [
      ...table.querySelectorAll(`td.${clsName}`),
      ...table.querySelectorAll(`th.${clsName}`),
    ];
    // Spalten mit der Klasse "leave-alone" ignorieren if (cells[0]?.classList?.contains?.("leave-alone")) {
      zurückkehren;
    }
    const widthList = Zellen.map((el) => {
      returniere el.querySelector(".cell")?.scrollWidth || 0;
    });
    const max = Math.max(...BreiteListe);
    konstante Polsterung = 32;
    Tabelle.querySelectorAll(`col[name=${clsName}]`).fürJeden((el) => {
      el.setAttribute("Breite", max + Polsterung);
    });
  });
}

Der Erkundungsprozess in der Mitte ist ziemlich umständlich, aber die endgültige Codeimplementierung ist sehr prägnant. Wann wird die Berechnung der Spaltenbreite ausgelöst? Natürlich, nachdem das Rendern der Komponente abgeschlossen ist. Um die Wiederverwendung zu erleichtern, habe ich den Vue-Ansatz mit benutzerdefinierten Direktiven übernommen.

Vue.direktive("Spalten anpassen", {
  aktualisieren() {},
  bind() {},
  eingefügt(el) {
    setzeTimeout(() => {
      Spaltenbreite anpassen(el);
    }, 300);
  },
  KomponenteAktualisiert(el) {
    el.classList.add("r-Tabelle");
    setzeTimeout(() => {
      Spaltenbreite anpassen(el);
    }, 300);
  },
  unbind() {},
});

Darüber hinaus habe ich ein Vue-Plugin namens v-fit-columns gekapselt, das im npm-Repository veröffentlicht wurde und direkt installiert und verwendet werden kann.
Installieren:

npm installiere v-fit-columns --save

Import:

importiere Vue von „vue“;
Plugin aus „v-fit-columns“ importieren;
Vue.use(Plugin);

verwenden:

<el-table v-fit-Spalten>
  <el-table-column label="Nein." type="index" class-name="leave-alone"></el-table-column>
  <el-table-column label="Name" prop="name"></el-table-column>
  <el-table-column label="Alter" prop="Alter"></el-table-column>
</el-Tabelle>

Das Quellcode-Repository befindet sich hier: https://github.com/kaysonli/v-fit-columns. Geben Sie uns gerne Ihre Kommentare und Sterne!

Zusammenfassen

Diese Lösung ist so etwas wie ein Hack und befasst sich nur mit der Erfüllung der Anforderungen. Sie kann in anderen Aspekten einige Mängel aufweisen, wie z. B. ein leichtes Aufblitzen nach dem Rendern (weil die Breite neu angepasst werden muss, was zu einem erneuten Fluss führt). Gemessen am Endergebnis ist es jedoch durchaus zufriedenstellend.

Oben finden Sie den detaillierten Inhalt der perfekten Implementierung der Spaltenbreitenanpassung von el-table durch vue. Weitere Informationen zur Implementierung der Spaltenbreitenanpassung von el-table durch vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!