Tipps und Best Practices für die Verwendung von Direktiven zur Implementierung von Tabellenbäumen in Vue

Mit der zunehmenden Entwicklung des Internets werden Front-End-Frameworks immer ausgereifter und perfekter. Sein Komponentenentwicklungsmodell und seine reaktionsfähigen Funktionen machen die Front-End-Entwicklung schneller, einfacher und effizienter. Unter diesen ist Direktive ein sehr wichtiges Konzept und eine sehr wichtige Funktion in Vue.js, die es Benutzern ermöglicht, das Verhalten und die DOM-Operationen von Vue.js zu erweitern, um umfangreichere und flexiblere Funktionen zu erreichen. In diesem Artikel werden Tipps und Best Practices für die Implementierung von Tabellenbäumen in Vue.js mithilfe von Direktiven vorgestellt.

1. Direktive (Anweisung) ist ein spezielles Tag in Vue.js. Es unterscheidet sich vom herkömmlichen HTML-Tag. Es verfügt über eine starke Funktionalität und Flexibilität zum Schreiben und verwenden Sie es entsprechend Ihren eigenen Bedürfnissen.

Nehmen Sie als Beispiel die v-if-Anweisung, die mit Vue.js geliefert wird. Wenn das Ergebnis des angegebenen Ausdrucks wahr ist, wird der entsprechende Knoten im DOM-Baum entsprechend dem Element-Tag erstellt/aktualisiert, in dem sich die Anweisung befindet ; wenn der Wert des angegebenen Ausdrucks falsch ist, wird der entsprechende Knoten aus dem DOM-Baum entfernt. Dies ist die grundlegende Art, die Richtlinie zu verwenden.

2. Implementierung eines Tabellenbaums

Beim Tabellenbaum werden Daten in einer Baumstruktur in einer Tabelle angezeigt. Bei der Implementierung des Tabellenbaums können wir die Anweisungen in Vue.js verwenden, um dies zu erreichen.

In der Direktive gibt es zwei wichtige Konzepte: eines ist die Hook-Funktion und das andere ist die Dom-Element-Operation (DOM-Operation).

Die Hook-Funktion wird durch die Lebenszyklusfunktion dargestellt. Für die Implementierung der meisten DOM-Operationen umfasst sie hauptsächlich die fünf Funktionen binden, eingefügt, aktualisieren, komponentenaktualisiert und unbind. Unter anderem wird die Bindungsfunktion ausgeführt, wenn die Anweisung an das Element gebunden ist, die eingefügte Funktion wird ausgeführt, wenn das Element in den übergeordneten Knoten eingefügt wird, die Aktualisierungsfunktion wird ausgeführt, wenn das Element aktualisiert wird, und die Funktion „componentUpdated“ wird ausgeführt wird ausgeführt, nachdem die Komponente aktualisiert wurde, und die Funktion zum Aufheben der Bindung wird ausgeführt, wenn die Bindung des Befehls aufgehoben wird.

DOM-Elementoperation bedeutet, dass wir in Anweisungen DOM-Elemente direkt bedienen können, um die gewünschten Funktionen zu erreichen. Einschließlich Operationen wie „createElement“, „appendChild“, „removeChild“, „classList.add“ usw.

Als nächstes werden wir die spezifischen Implementierungsschritte der Implementierung von Tabellenbäumen in Vue.js basierend auf den Hook-Funktionen und DOM-Elementoperationen der Direktive detailliert analysieren.

(1) Datenvorbereitung

Zuerst müssen wir einen Datensatz vorbereiten, um alle Daten des Tabellenbaums zu speichern und ihn in nachfolgenden Vorgängen zu betreiben und zu aktualisieren.

const data = [{
    id: 1,
    name: 'Parent 1',
    children: [{
      id: 2,
      name: 'Child 1 of Parent 1'
    }, {
      id: 3,
      name: 'Child 2 of Parent 1',
      children: [{
        id: 4,
        name: 'Child 1 of Child 2 of Parent 1'
      }]
    }]
  },
  {
    id: 5,
    name: 'Parent 2'
  }
]

(2) Definition der Direktive

Als nächstes müssen wir eine Direktive mit dem Namen

definieren und spezifische DOM-Operationen in verschiedenen Phasen entsprechend der Lebenszyklusfunktion der Direktive ausführen.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr 
          v-for="node in treeData" 
          v-table-tree:node="{node: node, level: 0}" 
          :class="{'tree-row': node.hasChildren}" 
          :key="node.id">
          <td>{{node.id}}</td>
          <td>{{node.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  directives: {
    'table-tree': {
      bind: function (el, binding) {
        const table = el.querySelector('table') // 获取 table 元素
        const {node} = binding.value
        const childNodes = node.children
        if (childNodes && childNodes.length) {
          const parentTr = el.querySelector(`[key="${node.id}"]`) // 获取当前节点对应的 tr 元素
          const trLength = parentTr.querySelectorAll('td').length // 获取 tr 中子 td 的数量
          const td = document.createElement('td')
          td.setAttribute('colspan', trLength)
          td.innerHTML = '<div class="tree-content"></div>'
          parentTr.appendChild(td) // 增加一个 td 元素，用于放置下一级节点
          const childTable = document.createElement('table') // 新增一个 table 元素，用于放置下一级节点的数据
          td.querySelector('.tree-content').appendChild(childTable)

          childNodes.forEach((child) => { // 递归处理下一级节点
            child.hasChildren = !!child.children
            const tr = document.createElement('tr')
            tr.setAttribute('key', child.id)
            tr.classList.add('tree-child-row')
            childTable.appendChild(tr)
            const td = document.createElement('td')
            td.innerHTML = child.name
            td.classList.add('tree-child-content')
            tr.appendChild(td)
            if (child.children) {
              const innerTd = document.createElement('td')
              tr.appendChild(innerTd)
              const innerTable = document.createElement('table')
              innerTable.setAttribute('class', 'tree-inner-table')
              innerTd.appendChild(innerTable)
              this.$options.directives['table-tree'].bind(innerTable, {value: {node: child, level: binding.value.level + 1}})
            }
          })
        }
      },
      unbind: function(el, binding) {
      }
    }
  },
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.tree-row .tree-content:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
  background-image: url('expanding-arrow.png'); /* 展开箭头图标 */
  background-repeat: no-repeat;
  background-position: center center;
}
.tree-row:not(.expanded) .tree-content:before {
  transform: rotate(-90deg);
}
.tree-row.expanded .tree-content:before {
  transform: rotate(0);
}
.tree-child-row {
  display: none;
}
.tree-row.expanded ~ .tree-child-row {
  display: table-row;
}
</style>

table-tree(3) Effektanzeige

Seitdem haben wir alle Vorgänge zur Implementierung des Tabellenbaums abgeschlossen. Informationen zur Anzeige spezifischer Effekte finden Sie im Screenshot unten.

69f4749cf6f06cd8ff213ca948040ae5

3. Zusammenfassung

Dieser Artikel stellt hauptsächlich vor Tipps und Best Practices für die Verwendung von Direktiven zur Implementierung von Tabellenbäumen in Vue.js. Durch Hook-Funktionen und DOM-Elementoperationen können wir DOM-Elemente einfach abrufen und betreiben, um die erwarteten Funktionen zu erreichen. Gleichzeitig bietet uns die Direktivenfunktion von Vue.js große Flexibilität und Skalierbarkeit und kann an die persönlichen Bedürfnisse angepasst werden.

Das obige ist der detaillierte Inhalt vonTipps und Best Practices für die Verwendung von Direktiven zur Implementierung von Tabellenbäumen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!