vue 树形控件实现

Vue 树形控件实现方法

使用 Element UI 的 Tree 组件

Element UI 提供了成熟的 Tree 组件，适合快速实现树形结构。安装 Element UI 后，直接引入 Tree 组件即可。

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :props="defaultProps"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级节点',
        children: [{
          id: 2,
          label: '二级节点'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

递归组件实现自定义树

通过递归组件可以灵活定制树形控件的样式和行为。定义一个递归组件，通过 v-for 渲染子节点。

<template>
  <div class="tree">
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
    />
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [{
        id: 1,
        name: '根节点',
        children: [{
          id: 2,
          name: '子节点'
        }]
      }]
    }
  }
}
</script>

在 TreeNode.vue 中实现递归：

<template>
  <div>
    <div @click="toggle">{{ node.name }}</div>
    <div v-if="isExpanded && node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node'],
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

动态加载数据

对于大数据量的树形结构，可以通过动态加载优化性能。监听节点展开事件，异步加载子节点数据。

<template>
  <el-tree
    :load="loadNode"
    lazy
    :props="props"
  />
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '根节点' }])
      }
      if (node.level > 3) return resolve([])

      setTimeout(() => {
        resolve([{
          name: '动态加载节点',
          leaf: node.level >= 2
        }])
      }, 500)
    }
  }
}
</script>

添加交互功能

为树形控件添加复选框、右键菜单等交互功能。Element UI 的 Tree 组件内置了这些功能，也可以通过自定义实现。

<template>
  <el-tree
    :data="data"
    node-key="id"
    @node-click="handleNodeClick"
    @check-change="handleCheckChange"
  />
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: '节点1',
        children: [{
          id: 2,
          label: '节点2'
        }]
      }]
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log('节点点击', data)
    },
    handleCheckChange(data, checked) {
      console.log('复选框变化', data, checked)
    }
  }
}
</script>

样式定制

通过 CSS 覆盖或组件插槽定制树形控件的外观。Element UI 提供了丰富的插槽，可以自定义节点内容。

<template>
  <el-tree :data="data">
    <template #default="{ node, data }">
      <span class="custom-node">
        <span>{{ node.label }}</span>
        <el-button size="mini" @click="append(data)">添加</el-button>
      </span>
    </template>
  </el-tree>
</template>

以上方法涵盖了 Vue 中实现树形控件的主要方式，可根据项目需求选择合适的方案。