《ElementUI 基础知识》el-tree 之“我的电脑”目录结构效果

在ElementUI中，要创建一个类似“我的电脑”的树形结构，你可以使用el-tree组件。以下是一个简单的例子，展示如何使用ElementUI的el-tree组件来实现这种效果。

首先，确保你已经正确安装并导入了ElementUI。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :default-expanded-keys="defaultExpandedKeys"
    node-key="id"
    ref="tree"
  >
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <i v-if="data.type === 'folder'" :class="data.icon"></i>
      <i v-else :class="data.icon"></i>
      {{ node.label }}
    </span>
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [],
      defaultExpandedKeys: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从后端获取数据
      this.treeData = [
        {
          id: 1,
          label: '我的电脑',
          icon: 'el-icon-folder',
          children: [
            {
              id: 2,
              label: '文档',
              icon: 'el-icon-document',
              children: [
                // ...
              ]
            },
            {
              id: 3,
              label: '图片',
              icon: 'el-icon-picture',
              children: [
                // ...
              ]
            },
            // ...
          ]
        }
      ];
      this.defaultExpandedKeys = [1];
    }
  }
};
</script>
 
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

在这个例子中，我们定义了一个treeData数组，它包含了一个自定义的树结构，每个节点都有一个标签、一个唯一的ID和一个图标。el-tree组件使用data属性来展示这个树，并通过defaultProps定义了节点的子元素和标签使用的属性。slot-scope提供了一个自定义节点内容的方式，其中我们使用了图标字体来表示文件夹或文件。

请注意，这个例子使用了静态数据来模拟从后端获取的数据。在实际应用中，你需要用实际的API调用来替换fetchData方法，从而动态地从服务器获取数据。