Footable-Attribute, die bei Verwendung von VueJS verloren gehen v-if false/true

Question

Ich habe eine Tabelle, die Jquery footable verwendet. Ich habe mit VueJS kein Äquivalent gefunden.

Jetzt will ich löschen/wiederherstellen Zeile in der Tabelle, wenn ich eine Zeile löschen, mit

$vm0.isVisible = false; // (Each row is a vue component) 

mit:

<tr v-if="isVisible">...</tr> 

und dann zeige ich es wieder mit:

$vm0.isVisible = true; 

Zeile erscheint, aber alle Footable Attribute verlieren (data-toggle="true", data-hide="all", etc.)

Jeder weiß warum es passiert, und wenn es etwas zu tun gibt ???

Answer 1

Erwarten Sie nicht, dass Vue glücklich mit anderen Dom-Manipulatoren lebt. Vue streift Event-Listener beim Mounten auf einem Element. Dann wird es die Teile des Doms, für die es verantwortlich ist, gerne überschreiben, wann immer es sich dazu entscheidet. Wenn Sie ohne altes Javascript nicht leben können, müssen Sie es nach dem Mounten von Vue erhalten. Du versuchst den gegenteiligen Trick, mit kleinen Vues, ​​die in einem von Footable verwalteten Tisch laufen. Das wird niemals funktionieren.

Answer 2

Ich habe keine Entsprechung mit VueJS gefunden.

haben Sie https://github.com/ratiw/vue-table versucht? ich denke, es ist ähnlich zu Fuß

Answer 3

Vue.js verwendet Virtual-Dom zu Dom-Manipulationen durchführen. Ihre HTML-Elemente sind also vor dem Rendern Javascript-Objekte.

Zum Beispiel das <tr> Element (als virtuelles dom-Element) ist vielleicht ein Objekt wie folgt:

{tagName: 'tr', props: {class: 'table-row'}, children: []}

Die obige Aufgabe wird schließlich in <tr class="table-row"> gemacht.

In jQuery Footable ist das <tr> Element jedoch nur ein dom-Tag mit Requisiten wie data-toggle etc darin, die alle Requisiten von jQuery statt Vue.js gesteuert werden. Vue weiß nichts über diese Requisiten (data-toggle Art von Dingen) von jQuery erstellt. Wenn Sie also v-if oder v-show verwenden, um alles wieder erscheinen zu lassen, wird es nur in einem 'Vue Elementtyp' wiederhergestellt.

Sie können unter Verwendung von Flex-Box-Design und es ist sehr leicht zu erlernen eine kühle ansprechende Tabelle erstellen.

Wenn Sie keine reaktionsfähige Tabelle von flex-box oder dergleichen schreiben möchten, sollten Sie ElementUI/iView/Vue-Material ausprobieren/(Awesome Vue hat viele nützliche Repositories).

Viel Glück! Hoffe du kannst es schaffen!