基于Vue使用Element快速搭建网页（案例详细分析）

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-submenu>
        <!-- 更多导航 -->
      </el-menu>
    </el-aside>
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item)
    };
  }
};
</script>
 
<style>
.el-container {
  margin-left: 20px;
  margin-right: 20px;
}
</style>

这个例子展示了如何使用Element UI库中的<el-container>、<el-aside>、<el-main>、<el-menu>和<el-table>组件来创建一个具有侧边栏和主内容区的页面布局。同时，它还展示了如何使用v-for指令来循环渲染表格数据。这个例子简洁明了，并且使用了Element UI提供的样式，对于Vue开发者来说是一个很好的学习示例。