Conseils et bonnes pratiques pour utiliser des directives pour implémenter des arbres de table dans Vue

Avec le développement croissant d'Internet, les frameworks front-end deviennent de plus en plus matures et parfaits. Vue.js est l'un des meilleurs. Son modèle de développement de composants et ses fonctionnalités réactives rendent le développement front-end plus rapide, plus facile et plus efficace. Parmi eux, Directive est un concept et une fonction très importants dans Vue.js, qui permet aux utilisateurs d'étendre le comportement et les opérations DOM de Vue.js pour obtenir des fonctions plus riches et plus flexibles. Cet article présentera des conseils et des bonnes pratiques pour utiliser Directive pour implémenter des arborescences de tables dans Vue.js.

1. Présentation de la directive

La directive (instruction) est une balise spéciale dans Vue.js. Elle est différente de la balise HTML traditionnelle. Elle a une forte fonctionnalité et une grande flexibilité et peut être utilisée en fonction. à l'écriture et utilisez-le selon vos propres besoins.

Prenons l'exemple de l'instruction v-if fournie avec Vue.js Lorsque le résultat de l'expression spécifiée est vrai, le nœud correspondant sera créé/mis à jour sur l'arborescence DOM en fonction de la balise d'élément où se trouve l'instruction. ; lorsque la valeur de l'expression spécifiée Lorsqu'elle est fausse, le nœud correspondant sera supprimé de l'arborescence DOM. C’est la manière de base d’utiliser Directive.

2. Implémentation de l'arborescence des tableaux

L'arborescence des tableaux est une donnée affichée dans une structure arborescente dans un tableau. Dans le processus d'implémentation de l'arborescence des tableaux, nous pouvons utiliser les instructions de Vue.js pour y parvenir.

Dans Directive, il y a deux concepts importants, l'un est la fonction hook et l'autre est l'opération de l'élément dom (DOM Operation).

La fonction hook est représentée par la fonction de cycle de vie.Pour la mise en œuvre de la plupart des opérations DOM, elle comprend principalement les cinq fonctions bind, insert, update, componentUpdated et unbind. Parmi eux, la fonction de liaison sera exécutée lorsque l'instruction est liée à l'élément, la fonction insérée sera exécutée lorsque l'élément sera inséré dans le nœud parent, la fonction de mise à jour sera exécutée lorsque l'élément sera mis à jour, la fonction composantUpdated sera sera exécuté après la mise à jour du composant, et la fonction de dissociation sera exécutée lorsque la commande sera déliée.

Le fonctionnement des éléments DOM signifie que dans les instructions, nous pouvons directement faire fonctionner les éléments DOM pour obtenir les fonctions souhaitées. Y compris des opérations telles que createElement, appendChild, RemoveChild, classList.add, etc.

Ensuite, nous analyserons en détail les étapes d'implémentation spécifiques de l'implémentation des arbres de table dans Vue.js basées sur les fonctions hook de Directive et les opérations sur les éléments DOM.

(1) Préparation des données

Tout d'abord, nous devons préparer un ensemble de données pour stocker toutes les données de l'arborescence des tableaux, puis l'exploiter et le mettre à jour lors des opérations ultérieures.

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) Définition de la directive

Ensuite, nous devons définir une directive nommée table-tree et effectuer des opérations DOM spécifiques à différentes étapes en fonction de la fonction de cycle de vie de la directive.

<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) Affichage des effets

Depuis, nous avons terminé toutes les opérations pour implémenter l'arborescence des tableaux. Pour l'affichage d'effets spécifiques, veuillez vous référer à la capture d'écran ci-dessous.

28886ace242830d3f2e4b9fa11864fbf

Résumé

Cet article présente principalement. Conseils et bonnes pratiques pour implémenter des arborescences de tables à l'aide de directives dans Vue.js. Grâce aux fonctions de hook et aux opérations sur les éléments DOM, nous pouvons facilement obtenir et utiliser des éléments DOM pour réaliser les fonctions que nous attendons. Dans le même temps, la fonction directive de Vue.js nous offre également une grande flexibilité et évolutivité, et peut être personnalisée en fonction des besoins personnels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!