Vue.js神技揭秘：Directive操控DOM如何玩转表格树？

一、Directive 概述

在Vue.js里头，Directives这个东西就像是个大杀器！有它在，你就能随心所欲地操控DOM了，不用担心会头疼。举个例子，咱们熟知的v-if指令，只要条件对了，就能在HTML树上添删节点。要是不对劲，那就要小心了，可能会被这指令给删掉。弄清楚这几个小窍门，前端开发就变得好玩了不少。

二、表格树的实现

简单来说，表格树像大树一样画数据，看起来很酷。想学会这招儿，关键是弄明白 Directive 里的那两大神技。首先Hook Function（钩子函数）千万别忘了，然后HTML也得玩儿溜点儿。Hook Function有五种玩法儿：bind、inserted、updated、componentUpdated 和 unbind，各种效果都行！玩儿转HTML你就能随心所欲地打造自己的style。

三、数据准备

生成表格树得有料才行，随便去哪儿都能用，更新起来也简便得很。知道信息这点贼重要，这样树形结构才能做对！

四、Directive 的定义

首先得了解下Vue.js中那个叫做”table-tree”的特性，那可是搭建表格树的核心呢!用一些特别好用的钩子函数，再加上一点基础的DOM操作，你就能轻而易举地改变DOM结构了，这样搭建和展示表格树就不再难了！

五、钩子函数详解

Directive这个东东听过没？它就像咱们平时用的”小勾子”一样，比如会用到的bind啊、inserted啊、update之类的小功能。这样一来，咱们就可以随心所欲地控制指令绑定啦、元素插入呐、更新啥的，简直不要太爽！用了之后，你绝对会爱上它们的！

六、DOM 元素操作

搞定HTML dom操作，给Directive点个赞！想要哪个元素，随手拈来摆弄下就可以用了。比如，自己新搞出来一个元素，再加个小弟弟进去，看不顺眼的话就fire掉它…都是为了让我们的网页更加炫酷！

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'
  }
]

七、实现步骤总结

咱们用Vue.js画表格树，第一件事肯定是给表格填充好数据。然后，搞个Directive指令，串上几个钩子函数就能应对DOM元素了。最后，把这些设定搬到表格树上就大功告成！这样的话，你在网上看到的那层级清晰的表格数据就是这么来滴！

  

    

      

        

          
ID
          
Name
        
      
      

        

          
{{node.id}}
          
{{node.name}}
        
      
    
  


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 = '
'
          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
    }
  }
}


.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;
}

八、扩展性与灵活性

哥们儿，学学Vue的Directive呗，肯定给你惊喜！怎么自定义都行，速度也快得飞起。Computed Directive一加，代码就美如画了！所以别犹豫，全用到项目里去，省时又好看，多爽！

九、最佳实践与优化

搞定表格树的话，我们可得费点功夫！在设计过程中，别忘了考虑如何让它变得清晰明了、速度飞快！比如，试试用钩子函数搞定那些多余的内存占用，这样就能避免DOM操作拖慢速度啦～这些小技巧可以让你省去不少麻烦事儿哦~

。