ディレクティブを使用して Vue でテーブル ツリーを実装するためのヒントとベスト プラクティス

インターネットの発展に伴い、フロントエンド フレームワークはますます成熟し、完璧になってきています。Vue.js は最高のものの 1 つです。そのコンポーネント開発モデルと応答性の高い機能により、フロントエンド開発がより速く、より簡単になり、より効率的、効率的。その中でも、ディレクティブは Vue.js の非常に重要な概念および機能であり、ユーザーが Vue.js の動作や DOM 操作を拡張して、より豊富で柔軟な機能を実現するのを容易にします。この記事では、ディレクティブを使用して Vue.js にテーブル ツリーを実装するためのヒントとベスト プラクティスを紹介します。

1. ディレクティブの概要

ディレクティブ(命令)はVue.jsの特殊なタグで、従来のHTMLタグとは異なり、DOMを操作する機能を持ち、強力な機能を持っています。その機能と柔軟性により、自分のニーズに合わせて作成して使用できます。

Vue.js に付属の v-if 命令を例に挙げると、指定した式の結果が true の場合、要素タグに従って DOM ツリー上に対応するノードが作成/更新されます。命令が見つかったとき; 指定されたとき 式の値が false の場合、対応するノードが DOM ツリーから削除されます。これがディレクティブの基本的な使い方です。

2. テーブルツリーの実装

テーブルツリーとは、テーブル内にデータをツリー構造で表示する一般的なデータの表示方法です。テーブル ツリーを実装するプロセスでは、Vue.js の命令を使用してそれを実現できます。

ディレクティブには、フック関数 (Hook Function) と dom 要素の操作 (DOM Operation) という 2 つの重要な概念があります。

フック関数はライフサイクル関数で表され、ほとんどの DOM 操作の実装には、主に、bind、insert、update、componentUpdated、unbind の 5 つの関数が含まれています。このうち、bind 関数は要素に命令がバインドされたときに実行され、inserted 関数は要素が親ノードに挿入されたときに実行され、update 関数は要素が更新されたときに実行され、componentUpdated 関数はアンバインド関数はコンポーネントが更新された後に実行され、コマンドがアンバインドされるときに実行されます。

DOM 要素の操作とは、命令内で DOM 要素を直接操作して、必要な機能を実現できることを意味します。 createElement、appendChild、removeChild、classList.add などの操作が含まれます。

次に、Vue.js でテーブル ツリーを実装する具体的な実装手順を、ディレクティブのフック関数と DOM 要素の操作に基づいて詳細に分析します。

(1) データの準備

まず、テーブルツリーのすべてのデータを格納し、後続の操作で操作および更新するためのデータのセットを準備する必要があります。

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) ディレクティブの定義

次に、table-tree という名前のディレクティブを定義する必要があります。ディレクティブのライフサイクル関数に従って、異なる リンク内で特定の DOM 操作を実行します。

<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>

(3) エフェクト表示

これで、テーブルツリーの実装作業はすべて完了しました。具体的なエフェクト表示については、以下のスクリーンショットを参照してください。

2dca89022ae2b06dea907276f42b7f55

三, 概要

この記事では主に、ディレクティブを使用して Vue.js でテーブル ツリーを実装するためのテクニックとベスト プラクティスを紹介します。フック関数と DOM 要素の操作により、DOM 要素を簡単に取得および操作して、期待する機能を実現できます。同時に、Vue.js のディレクティブ機能は優れた柔軟性と拡張性を提供し、個人のニーズに応じてカスタマイズできます。

以上がディレクティブを使用して Vue でテーブル ツリーを実装するためのヒントとベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。