vue中实现树

在 Vue 中实现树形结构

使用递归组件

递归组件是 Vue 中实现树形结构的常见方法。定义一个组件，该组件在其模板中调用自身。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.name }}
      <tree-node v-if="node.children" :treeData="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  }
}
</script>

使用第三方库

Vue 生态中有许多成熟的树形组件库，如 vue-tree-halation 或 element-ui 的树形组件。

安装 element-ui 的树形组件：

npm install element-ui

使用示例：

<template>
  <el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>

<script>
import { ElTree } from 'element-ui';

export default {
  components: {
    ElTree
  },
  data() {
    return {
      treeData: [{
        label: 'Node 1',
        children: [{
          label: 'Node 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

动态加载节点

对于大型树形结构，可以使用动态加载来优化性能。

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

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ label: 'Root' }]);
      }
      setTimeout(() => {
        resolve([{ label: 'Child' }]);
      }, 500);
    }
  }
};
</script>

自定义节点内容

可以通过插槽自定义树形结构中每个节点的渲染内容。

<template>
  <el-tree :data="treeData">
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <span>{{ node.label }}</span>
      <span>
        <el-button @click="append(data)">Add</el-button>
      </span>
    </span>
  </el-tree>
</template>

处理节点事件

树形组件通常支持节点点击、勾选等事件。

<template>
  <el-tree
    :data="treeData"
    @node-click="handleNodeClick"
    show-checkbox
    @check-change="handleCheckChange">
  </el-tree>
</template>

<script>
export default {
  methods: {
    handleNodeClick(data, node) {
      console.log(data, node);
    },
    handleCheckChange(data, checked) {
      console.log(data, checked);
    }
  }
};
</script>

数据格式转换

如果后端返回的数据格式与树形组件要求的格式不一致，需要进行转换。

function convertToTree(data) {
  const map = {};
  data.forEach(item => {
    map[item.id] = { ...item, children: [] };
  });
  const tree = [];
  data.forEach(item => {
    if (item.parentId) {
      map[item.parentId].children.push(map[item.id]);
    } else {
      tree.push(map[item.id]);
    }
  });
  return tree;
}

性能优化

对于大型树形结构，可以使用虚拟滚动来提高性能。

<template>
  <virtual-tree :data="bigTreeData" :item-size="30" height="400px">
    <template v-slot="{ node }">
      {{ node.label }}
    </template>
  </virtual-tree>
</template>