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
Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container
1. Stellen Sie den Nginx-Dienst im Container bere...
JavaScript imitiert die Spezialeffekte der Jingdong-Lupe
In diesem Artikel wird der spezifische Code von J...
Native Netzwerkanforderungsschema von Vue und Netzwerkanforderungsbibliothek von JS
1. Native Netzwerkanforderung 1. XMLHttpRequest (...
JavaScript-Plugin-Kapselung für Tabellenwechsel
In diesem Artikel wird der Kapselungscode von Jav...
Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels
Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...
Detaillierte Erklärung von Objektliteralen in JS
Inhaltsverzeichnis Vorwort 1. Setzen Sie den Prot...
Detaillierte Erläuterung der Apache-Website-Dienstkonfiguration basierend auf Linux
Als Open-Source-Software ist Apache eine der am h...
CSS Lieferadresse Parallelogramm Linienstil Beispielcode
Der Code sieht folgendermaßen aus: // Linienstil ...
Freigabe der Schritte zum SVN-Dienstsicherungsvorgang
Schritte zur Sicherung des SVN-Dienstes 1. Quells...
Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter
Webseite WB.ExecWB-Steuerungsdruckmethode Code ko...
10 zu wenig genutzte oder missverstandene HTML-Tags
Hier sind 10 HTML-Tags, die zu wenig verwendet od...
Das Problem, dass jquery.form.js den Zugriff im IE verweigert und der Input-Upload-Button aktiv angeklickt werden muss
Schauen wir uns zunächst den Code an <form id=...
Karusselleffekte mit JavaScript implementieren
In diesem Artikel wird der spezifische Code für J...
Mehrere Lösungen für die Ausrichtung von CSS-Datensatztextsymbolen
Während der Entwicklung kommt es sehr häufig vor,...
Vertieftes Verständnis des Implementierungsprinzips des Require Loader
Vorwort Wir sagen oft, dass Node keine neue Progr...