Ant entwirft eine Vue-Tabelle, um ein vollständiges Beispiel skalierbarer Spalten zu erhalten
Perfekte Lösung für das skalierbare Spaltenproblem der Ant-Design-Vue-Tabelle, indem skalierbare Spalten in festen Spalten und mehrstufigen Überschriften realisiert werdenIch dachte, dieses Ding wäre einfach zu verwenden, da auf der offiziellen Website Beispiele angegeben wurden. Wir können der offiziellen Website jedoch immer noch nicht allzu sehr vertrauen. Die offizielle Website kann nur die grundlegendsten Beispiele bereitstellen und unsere normalen Nutzungsszenarien sind oft viel komplizierter, wie z. B. feste Spalten, feste Überschriften, integrierte Kontrollkästchenspalten und mehrstufige Überschriften. Um diesen Situationen gerecht zu werden, ist es oft notwendig, eigene Lösungen zu entwickeln. 1. Zunächst habe ich Chiangs offizielles Beispiel kopiert, aber es ließ sich nicht herausziehen. Nach dem Vergleich mit dem offiziellen stellte ich fest, dass das CSS anders war, also fügte ich die erste Änderung hinzu. Da der Stil Inline-Stil ein eigenes Übersetzungsattribut hat, entfernte ich direkt right: 0 und nur left -5. Stellen Sie die Höhe auf 100 % ein.
.resize-table-th {
Position: relativ;
.table-ziehbarer-griff {
Höhe: 100 % !wichtig;
unten: 0;
links: -5px !wichtig;
Cursor: Spaltengröße ändern;
Touch-Aktion: keine;
Position: absolut;
}
}2. Dieses Mal können Sie sehen, dass sich das Übersetzungsattribut nach jedem Ziehen in Echtzeit ändert, die Zelle jedoch nicht breiter wird oder sich bewegt. Also habe ich die Elemente noch einmal überprüft und festgestellt, dass sich die Breite von „th“ änderte, das Breitenattribut von „colGroup“ jedoch nicht. Also begann ich, nach dem entsprechenden untergeordneten Element col der colGroup zu suchen. Schließlich fand ich es und änderte dann beim Ziehen das Breitenattribut von col der colGroup. So können Sie die Änderungen verfolgen. 3. Als nächstes stellte ich fest, dass das Strecken einen Fehler verursachen würde, wenn die Spalten und Überschriften fixiert waren. Beim Betrachten des Codes habe ich festgestellt, dass sich thead und tbody tatsächlich in unterschiedlichen Tabellen befinden, wenn es sich um eine feste Spalte oder eine feste Überschrift handelt. Zu diesem Zeitpunkt müssen Sie alle colGroups finden, um col zu messen und die Breite zu ändern. Dadurch wird die Streckung des festen Headers übernommen. Bei festen Spalten müssen Sie jedoch dennoch CSS separat festlegen, „table-fixed-left“ suchen und die Breite zurücksetzen. Hier ist ein CodeBestimmen Sie anhand des aktuellen th, welcher untergeordnete Knoten th das übergeordnete Element ist, entsprechend welchem col-Knoten von colGroup
const loopDom = ss => {
wenn (ss.vorherigesGeschwister !== null) {
thDomIndex++;
loopDom(ss.vorherigesGeschwister);
}
};Setzt die Breite von festen Spalten zurück (behandeln nur linke Floats)
Funktion ResetFixedColumns(Breite) {
const fixedHead = document.querySelector(".ant-table-fixed-left .ant-table-header");
const fixedBody = document.querySelector(".ant-table-fixed-left .ant-table-body-outer .ant-table-fixed");
if (festerKopf) {
fixedHead.style.width = Breite + "px";
fixedBody.style.width = Breite + "px";
}
}Lösen Sie das Problem der mehrstufigen Header-ErweiterungsspalteDurchlaufen Sie das Array rekursiv und ermitteln Sie die Breite
getDraggingMap(tbCols, draggingMap) {
tbCols.fürEach(col => {
wenn (Spalte.Kinder) {
dies.getDraggingMap(col.children, draggingMap);
} anders {
const key = col.dataIndex || col.key; //Die Tabellendaten müssen diese beiden Attribute haben draggingMap[key] = col.width || 0;
}
});
},Durchlaufen Sie das Array rekursiv und holen Sie sich die aktuelle Spalte (diese Rekursion ist wirklich nervig, ich weiß nicht, was Sie über das Schreiben von Rekursion denken)
// Mehrstufige Header verarbeiten getRenderCoL(key, tbCols) {
lass Ergebnis = "";
dies._.forEach(tbCols, item => {
wenn (Element.Kinder) {
Ergebnis = this.getRenderCoL(Schlüssel, Element.Kinder);
gebe !Ergebnis zurück;
} anders {
const k = item.dataIndex || item.Schlüssel;
wenn (k === Schlüssel) {
Ergebnis = Artikel;
gibt false zurück;
}
}
});
Ergebnis zurückgeben;
}Durchlaufen Sie das Array rekursiv, um den Index der mehrstufigen Header-Operationsspalte zu erhalten (die Rekursion ist auch unerträglich. Zu Beginn fehlt der letzte Renturn und es läuft immer wieder falsch. Der Schattenbereich der Rekursion ist unendlich).
const loopDom = (Spalten, Spalte) => {
let tag = true;
dies._.forEach(cols, co => {
wenn (co.dataIndex == col.dataIndex) {
thDomIndex++;
Tag = falsch;
Rückgabetag;
}
wenn (Mitkinder) {
tag = loopDom(co.children, col);
Rückgabetag;
} anders {
thDomIndex++;
}
});
Rückgabetag;
};Hier ist der komplette CodeDies ist eine js-Datei, die die Hauptdatei der Tabelle über Mixin einführt. Die Tabelle fügt hinzu :Komponenten="ziehen(Spaltentasten)"
//mixins/tableDragResize.js
importiere Vue von „vue“;
importiere VueDraggableResizable von „vue-draggable-resizable“;
Vue.component("vue-draggable-resizable", VueDraggableResizable);
Standard exportieren {
Daten() {
zurückkehren {
maxLevel: 1
};
},
Methoden: {
ziehen(Spalten) {
zurückkehren {
Kopfzeile: {
Zelle: this.initDrag(Spalten)
}
};
},
/**
* @param { Tabellenspalten } tbCols
*/
initDrag(tbCols) {
let draggingMap = {};
Dies.getDraggingMap(tbCols, draggingMap, 1);
: Lassen Sie draggingState = Vue.observable(draggingMap);
return (h, Requisiten, Kinder) => {
sei thDomIndex = 0;
const { Schlüssel, ...restProps } = Requisiten;
lass col = {};
// Mehrstufige Überschriften verarbeiten col = this.getRenderCoL(key, tbCols);
wenn (!col || !col.width) {
//Hier müssen die Tabellendaten ein width-Attribut haben. Wenn nicht, wird das folgende Ziehen nicht ausgeführt. return <th {...restProps}>{children}</th>;
}
const onDrag = x => {
Spaltenbreite = Math.max(x, 1);
draggingState[Schlüssel] = Spaltenbreite;
thDomIndex = 0;
loopDom(tbCols, col);
wenn (!this.attrBute.isCheck) {
thDomIndex--;
}
Geben Sie colgroup ein, um die Abfrage auszuführen.
colgroup.forEach(Element => {
lass childCol = Element.children;
wenn (childCol[thDomIndex]) childCol[thDomIndex].style.width = col.width + "px";
});
dies.resetFixedColumns(col.width);
};
const loopDom = (Spalten, Spalte) => {
let tag = true;
dies._.forEach(cols, co => {
wenn (co.dataIndex == col.dataIndex) {
thDomIndex++;
Tag = falsch;
Rückgabetag;
}
wenn (Mitkinder) {
tag = loopDom(co.children, col);
Rückgabetag;
} anders {
thDomIndex++;
}
});
Rückgabetag;
};
const onDragstop = () => {};
zurückkehren (
<th {...restProps} Breite = {draggingState[Schlüssel]} Klasse = "resize-table-th" Datenindex = {col.Schlüssel}>
{Kinder}
<vue-ziehbar-größenveränderbar
Schlüssel={col.dataIndex || col.key}
Klasse = "Tabellen-ziehbarer-Griff"
w={20}
h = {this.getResizableHandler(col)}
x={draggingState[Schlüssel]}
z = {100}
Achse="x"
ziehbar={true}
größenveränderbar={false}
beim Ziehen = {beim Ziehen}
beiDragstop={beiDragstop}
></vue-draggable-resizable>
</th>
);
};
},
getResizableHandler(col) {
// lass baseH = thDom.getBoundingClientRect().height;
let size = diese.Zellengröße? diese.Zellengröße : diese.attrBute.Zellengröße;
sei baseH = Größe == "Mitte"? 47 : Größe == "Klein" ? 39 : 55;
wenn (col.isEndNode) returniere baseH * col.nodeLevel;
sonst wenn (col.leafNode && col.nodeLevel < this.maxLevel) {
gib BaseH * this.maxLevel zurück;
} sonst returniere baseH;
},
ResetFixedColumns(Breite) {
const fixedHead = document.querySelector(".ant-table-fixed-left .ant-table-header");
const fixedBody = document.querySelector(".ant-table-fixed-left .ant-table-body-outer .ant-table-fixed");
if (festerKopf) {
fixedHead.style.width = Breite + "px";
fixedBody.style.width = Breite + "px";
}
},
getDraggingMap(tbCols, draggingMap, nodeLevel) {
tbCols.forEach((col, index) => {
col.nodeLevel = Knotenebene;
col.isEndNode = index == tbCols.length - 1;
dies.maxLevel = Math.max(dieses.maxLevel, nodeLevel);
wenn (Spalte.Kinder) {
col.leafNode = falsch;
Dies.getDraggingMap(col.children, draggingMap, nodeLevel + 1);
} anders {
col.leafNode = true;
const key = col.dataIndex || col.key; //Die Tabellendaten müssen diese beiden Attribute haben draggingMap[key] = col.width || 0;
}
});
},
getRenderCoL(Schlüssel, tbCols) {
lass Ergebnis = "";
dies._.forEach(tbCols, item => {
wenn (Element.Kinder) {
Ergebnis = this.getRenderCoL(Schlüssel, Element.Kinder);
gebe !Ergebnis zurück;
} anders {
const k = Element.DatenIndex || Element.Schlüssel;
wenn (k === Schlüssel) {
Ergebnis = Artikel;
gibt false zurück;
}
}
});
Ergebnis zurückgeben;
}
}
};Postscript Perfekte Lösung für die Erweiterungsspalte der mehrstufigen Tabellenüberschrift Ändern Sie die ursprüngliche getDraggingMap-Methode, fügen Sie die Ebene nodeLevel hinzu, isEndNode ist der letzte Knoten unter der Deckungsebene, und this.maxLevel zeichnet die maximale Ebene auf
getDraggingMap(tbCols, draggingMap, nodeLevel) {
tbCols.forEach((col, index) => {
col.nodeLevel = Knotenebene;
col.isEndNode = index == tbCols.length - 1;
dies.maxLevel = Math.max(dieses.maxLevel, nodeLevel);
wenn (Spalte.Kinder) {
col.leafNode = falsch;
Dies.getDraggingMap(col.children, draggingMap, nodeLevel + 1);
} anders {
col.leafNode = true;
const key = col.dataIndex || col.key; //Die Tabellendaten müssen diese beiden Attribute haben draggingMap[key] = col.width || 0;
}
});
},Fügen Sie eine Methode hinzu, um die Höhe des ziehbaren Tabellengriffs zu handhaben Bild anzeigen
Der verschiebbare Bereich ist der rote Bereich. Um diesen Effekt zu erzielen, ist folgende Verarbeitung erforderlich Entfernen Sie zuerst die Höhe im CSS: 100 %;
h = {this.getResizableHandler(col)}size ist die Tischgröße
getResizableHandler(col) {
// lass baseH = thDom.getBoundingClientRect().height;
let size = diese.Zellengröße? diese.Zellengröße : diese.attrBute.Zellengröße;
sei baseH = Größe == "Mitte"? 47 : Größe == "Klein" ? 39 : 55;
wenn (col.isEndNode) returniere baseH * col.nodeLevel;
sonst wenn (col.leafNode && col.nodeLevel < this.maxLevel) {
gib BaseH * this.maxLevel zurück;
} sonst returniere baseH;
},Ende Oben sind die Details der Ant Design Vue-Tabelle, um skalierbare Spalten zu erreichen. Weitere Informationen zu skalierbaren Spalten der Ant Design Vue-Tabelle finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: So installieren Sie MySQL über Yum auf CentOS7
>>: So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist
Artikel empfehlen
Beispiel für die Verwendung eines CSS-Filters zum Schreiben von Mouseover-Effekten
Verwenden Sie einen CSS-Filter, um den Mouseover-...
Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen
In einem Artikel vor langer Zeit habe ich über di...
MySQL-Hochverfügbarkeitslösung MMM (MySQL Multi-Master-Replikationsmanager)
1. Einführung in MMM: MMM steht für Multi-Master ...
Verwenden Sie Javascript, um die Funktion zum Senden des SMS-Bestätigungscodeintervalls zu implementieren
Wenn wir uns in vielen Apps und Websites anmelden...
Beispiel für das Hinzufügen von Attributen mithilfe von Stilen in HTML
Fügen Sie den erforderlichen Links Inline-Stile hi...
So migrieren Sie MySQL-Daten richtig nach Oracle
In der MySQL-Datenbank gibt es eine Tabelle Stude...
So ändern Sie das vergessene Passwort bei der Installation von MySQL auf dem Mac
1. MySQL-Datenbank auf dem Mac installieren 1. My...
Implementierung der CSS3-Button-Randanimation
Erster Blick auf die Wirkung: html <a href=&qu...
Der MySQL-Tagesstatistikbericht trägt 0 ein, wenn für diesen Tag keine Daten vorliegen
1. Reproduktion des Problems: Zählen Sie die Gesa...
So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit
Front-End-Projektpaketierung Suchen Sie .env.prod...
Führen Sie die Schritte aus, um mit Samba Ordner in CentOS 7 freizugeben
Vorwort Samba ist eine kostenlose Software, die d...
Anweisung zur Ermittlung der Browserversion und Kompatibilität mit mehreren Browsern
<!--[wenn lte IE 6]> <![endif]--> Sich...
jQuery implementiert das Klicken auf die linke und rechte Schaltfläche zum Wechseln von Bildern
In diesem Artikelbeispiel wird der spezifische Co...
Erläuterung der MySQL-Indexoptimierung
Bei unserer täglichen Arbeit führen wir manchmal ...
So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung
Dieser Artikel beschreibt, wie man PHP und Nginx ...