Petua dan amalan terbaik untuk menggunakan arahan untuk melaksanakan pepohon jadual dalam Vue

Dengan perkembangan Internet yang semakin meningkat, rangka kerja bahagian hadapan menjadi semakin matang dan sempurna Vue.js ialah salah satu model pembangunan komponen dan ciri responsifnya menjadikan pembangunan bahagian hadapan lebih pantas, lebih mudah dan lebih cekap. Antaranya, Arahan ialah konsep dan fungsi yang sangat penting dalam Vue.js, yang memudahkan pengguna memanjangkan gelagat dan operasi DOM Vue.js untuk mencapai fungsi yang lebih kaya dan lebih fleksibel. Artikel ini akan memperkenalkan petua dan amalan terbaik untuk melaksanakan pepohon jadual dalam Vue.js menggunakan Arahan.

1. Gambaran Keseluruhan Arahan

Arahan (arahan) ialah teg khas dalam Vue.js Fungsinya adalah untuk mengendalikan DOM. Ia mempunyai fungsi dan fleksibiliti yang kuat dan boleh digunakan mengikut ke Tulis dan gunakannya mengikut keperluan anda sendiri.

Ambil arahan v-if yang disertakan dengan Vue.js sebagai contoh Apabila hasil ungkapan yang dinyatakan adalah benar, nod yang sepadan akan dibuat/kemas kini pada pepohon DOM mengikut tag elemen tempat arahan itu berada. ; apabila nilai ungkapan yang ditentukan Apabila palsu, nod yang sepadan akan dialih keluar daripada pepohon DOM. Ini ialah cara asas untuk menggunakan Arahan.

2. Pelaksanaan pokok meja

Pokok jadual ialah data yang dipaparkan dalam struktur pokok dalam jadual. Dalam proses melaksanakan pepohon jadual, kita boleh menggunakan arahan dalam Vue.js untuk mencapainya.

Dalam Arahan, terdapat dua konsep penting, satu ialah fungsi cangkuk dan satu lagi ialah operasi elemen dom (Operasi DOM).

Fungsi cangkuk diwakili oleh fungsi kitaran hayat Untuk pelaksanaan kebanyakan operasi DOM, ia merangkumi lima fungsi mengikat, memasukkan, mengemas kini, komponenDikemas kini dan menyahikat. Antaranya, fungsi bind akan dilaksanakan apabila arahan terikat kepada elemen, fungsi yang dimasukkan akan dilaksanakan apabila elemen dimasukkan ke dalam nod induk, fungsi kemas kini akan dilaksanakan apabila elemen dikemas kini, fungsi componentUpdated akan dilaksanakan selepas komponen dikemas kini, dan fungsi unbind akan Dilaksanakan apabila arahan tidak terikat.

Pengendalian elemen DOM bermaksud bahawa dalam arahan, kita boleh mengendalikan elemen DOM secara langsung untuk mencapai fungsi yang kita inginkan. Termasuk operasi seperti createElement, appendChild, removeChild, classList.add, dsb.

Seterusnya, kami akan menganalisis secara terperinci langkah pelaksanaan khusus untuk melaksanakan pepohon jadual dalam Vue.js berdasarkan fungsi cangkuk Arahan dan operasi elemen DOM.

(1) Penyediaan data

Pertama, kita perlu menyediakan satu set data untuk menyimpan semua data pepohon jadual, dan mengendalikan serta mengemas kininya dalam operasi seterusnya.

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) Definisi arahan

Seterusnya, kita perlu mentakrifkan Arahan bernama table-tree dan melaksanakan operasi DOM tertentu pada peringkat yang berbeza mengikut fungsi kitaran hayat arahan tersebut.

<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) Paparan kesan

Sejak itu, kami telah menyelesaikan semua operasi untuk melaksanakan pokok meja. Untuk paparan kesan tertentu, sila rujuk tangkapan skrin di bawah.

3 Ringkasan

Artikel ini Petua dan amalan terbaik untuk melaksanakan pepohon jadual menggunakan arahan dalam Vue.js. Melalui fungsi cangkuk dan operasi elemen DOM, kami boleh mendapatkan dan mengendalikan elemen DOM dengan mudah untuk mencapai fungsi yang kami harapkan. Pada masa yang sama, fungsi arahan Vue.js juga memberikan kami fleksibiliti dan skalabiliti yang hebat, dan boleh disesuaikan mengikut keperluan peribadi.

Atas ialah kandungan terperinci Petua dan amalan terbaik untuk menggunakan arahan untuk melaksanakan pepohon jadual dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!