Vue樹形組件詳解

Vue樹形組件是一個非常常用的組件，可以用於展示數據的層級結構，比如樹形菜單、文件目錄樹等等。在Vue框架中，有很多非常好用的樹形組件庫，比如element-ui、iview、vue-treeselect等等，本文將主要介紹基於vue組件開發的樹形組件。

一、懶加載

當有大量的節點需要渲染時，我們可以採用懶加載的方式來優化性能。我們可以只渲染目前可視範圍內的節點，當用戶需要展開某一個節點時再渲染其子節點。這種方式可以充分利用虛擬列表技術來減小渲染開銷，提高組件的渲染性能。

// 自定義一個樹形節點組件
<template>
  <div :style="{ marginLeft: level * 20 + 'px' }">
    <i v-if="isFolder" :class="{ open: open, close: !open }" @click="toggle"></i>
    <span>{{ name }}</span>
  </div>
</template>
 
// 通過watch監聽是否需要懶加載子節點
watch: {
  open(val) {
    if (val) {
      // 模擬異步加載子節點
      setTimeout(() => {
        this.children = [
          { name: '子節點1', isFolder: false },
          { name: '子節點2', isFolder: false },
          { name: '子節點3', isFolder: false }
        ]
      }, 1000)
    }
  }
}

二、樹形菜單

樹形菜單是一種很常用的樹形組件，往往用於網站的導航菜單等場景。我們可以通過遍曆數據源來手動構建一個樹形菜單組件。

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <div @click="handleClick(item)">{{ item.name }}</div>
      <template v-if="item.children">
        <tree-menu :list="item.children"></tree-menu>
      </template>
    </li>
  </ul>
</template>
 
<script>
export default {
  name: 'TreeMenu',
  props: ['list'],
  methods: {
    handleClick(item) {
      console.log(item.name)
    }
  }
}
</script>

三、右鍵新增刪除編輯

對於一些需要進行增刪改查操作的樹形組件，我們可以為每一個節點綁定相關的右鍵菜單，通過彈出式菜單讓用戶可以方便地對節點進行修改。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @contextmenu.prevent="showContextMenu($event, item)">
        <span @dblclick="handleEdit(item)">{{ item.name }}</span>
        <template v-if="item.children">
          <tree-node :list="item.children"></tree-node>
        </template>
      </li>
    </ul>
    <ul v-show="contextMenu.show" :style="{ left: contextMenu.left + 'px', top: contextMenu.top + 'px' }">
      <li @click="handleAdd">新增節點</li>
      <li @click="handleDelete">刪除節點</li>
      <li @click="handleEdit(contextMenu.node)">編輯節點</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: ['list', 'level'],
  data() {
    return {
      contextMenu: {
        show: false,
        node: null,
        left: 0,
        top: 0
      }
    }
  },
  methods: {
    showContextMenu(event, item) {
      event.stopPropagation()
      event.preventDefault()
      this.contextMenu.show = true
      this.contextMenu.node = item
      this.contextMenu.left = event.clientX
      this.contextMenu.top = event.clientY
    },
    handleAdd() {
      // 新增節點操作
    },
    handleDelete() {
      // 刪除節點操作
    },
    handleEdit(item) {
      // 編輯節點操作
    }
  }
}
</script>

四、添加和刪除

對於一些需要進行動態添加和刪除的樹形組件，我們可以通過數據源的變化來動態響應視圖的變化。

<template>
  <div>
    <button @click="add">> 新增 </button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <div>{{ item.name }}</div>
        <button @click="remove(index)"> 刪除 </button>
        <template v-if="item.children">
          <tree-node :list="item.children"></tree-node>
        </template>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: ['list', 'level'],
  methods: {
    add() {
      this.list.push({
        name: `節點${this.list.length + 1}`,
        children: []
      })
    },
    remove(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

五、樹形組件選取

一些業務場景需要通過樹形組件來進行數據的選取，比如城市選擇器、商品分類選擇器等等。我們可以通過綁定單選、多選的事件來實現選取功能。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <label :for="'checkbox-' + index">
          <input :id="'checkbox-' + index" type="checkbox" :checked="item.checked" @change="handleCheck(item)">
          {{ item.name }}
        </label>
        <template v-if="item.children">
          <tree-node :list="item.children"></tree-node>
        </template>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: ['list'],
  methods: {
    handleCheck(item) {
      if (item.children && item.children.length) {
        this.$emit('checkAll', item)
      } else {
        this.$emit('check', item)
      }
    }
  }
}
</script>

六、總結

Vue樹形組件是一個非常常用的組件，需要根據具體業務場景選擇使用相關的庫或者依據業務需求自主開發。在開發過程中，我們要特別關注組件的性能和用戶體驗，優化渲染、增加交互等技巧都可以有效地提高用戶的滿意度和使用體驗。