ElementUI - 主页面--动态树&右侧内容管理

以下是一个使用ElementUI创建的包含动态树形菜单和内容管理的简单示例。

<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </el-aside>
    <el-main style="padding: 0">
      <div style="padding: 20px">
        <!-- 这里放置右侧内容，通过node-click事件处理函数控制显示的内容 -->
        <div v-if="activeName === 'content-management'">
          <!-- 内容管理组件 -->
          <el-button @click="addItem">添加项目</el-button>
          <div v-for="(item, index) in items" :key="index">
            {{ item }}
          </div>
        </div>
        <!-- 其他内容页签可以在这里添加 -->
      </div>
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [
        {
          label: '内容管理',
          children: [
            {
              label: '内容列表',
              name: 'content-list'
            },
            {
              label: '添加内容',
              name: 'add-content'
            }
          ]
        },
        {
          label: '系统管理',
          children: [
            {
              label: '用户管理',
              name: 'user-management'
            },
            {
              label: '角色管理',
              name: 'role-management'
            }
          ]
        }
      ],
      activeName: '',
      items: []
    };
  },
  methods: {
    handleNodeClick(data) {
      this.activeName = data.name;
    },
    addItem() {
      this.items.push('新项目');
    }
  }
};
</script>

这个例子中，我们使用了<el-container>组件来构建页面布局，其中<el-aside>代表侧边栏，用于展示动态树形菜单，<el-main>代表主要内容区域。树形菜单通过@node-click事件来控制右侧内容的显示，在这个例子中，我们只展示了一个简单的内容管理页面，用户点击添加项目按钮，可以在下面列出新添加的项目。这个例子提供了一个基本框架，可以根据实际需求进行扩展和修改。