【编写前端需要学习的知识】Vue2+Element-UI

1. <el-container style="height: 500px; border: 1px solid #eee">
2. <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
3. <el-menu :default-openeds="['1', '3']">
4. <el-submenu index="1">
5. <template slot="title"><i class="el-icon-message"></i>导航一</template>
6. <el-menu-item-group>
7. <template slot="title">分组一</template>
8. <el-menu-item index="1-1">选项1</el-menu-item>
9. <el-menu-item index="1-2">选项2</el-menu-item>
10. </el-menu-item-group>
11. <el-menu-item-group title="分组2">
12. <el-menu-item index="1-3">选项3</el-menu-item>
13. </el-menu-item-group>
14. <el-submenu index="1-4">
15. <template slot="title">选项4</template>
16. <el-menu-item index="1-4-1">选项4-1</el-menu-item>
17. </el-submenu>
18. </el-submenu>
19. <el-submenu index="2">
20. <template slot="title"><i class="el-icon-menu"></i>导航二</template>
21. <el-menu-item-group>
22. <template slot="title">分组一</template>
23. <el-menu-item index="2-1">选项1</el-menu-item>
24. <el-menu-item index="2-2">选项2</el-menu-item>
25. </el-menu-item-group>
26. <el-menu-item-group title="分组2">
27. <el-menu-item index="2-3">选项3</el-menu-item>
28. </el-menu-item-group>
29. <el-submenu index="2-4">
30. <template slot="title">选项4</template>
31. <el-menu-item index="2-4-1">选项4-1</el-menu-item>
32. </el-submenu>
33. </el-submenu>
34. <el-submenu index="3">
35. <template slot="title"><i class="el-icon-setting"></i>导航三</template>
36. <el-menu-item-group>
37. <template slot="title">分组一</template>
38. <el-menu-item index="3-1">选项1</el-menu-item>
39. <el-menu-item index="3-2">选项2</el-menu-item>
40. </el-menu-item-group>
41. <el-menu-item-group title="分组2">
42. <el-menu-item index="3-3">选项3</el-menu-item>
43. </el-menu-item-group>
44. <el-submenu index="3-4">
45. <template slot="title">选项4</template>
46. <el-menu-item index="3-4-1">选项4-1</el-menu-item>
47. </el-submenu>
48. </el-submenu>
49. </el-menu>
50. </el-aside>
51. 
52. <el-container>
53. <el-header style="text-align: right; font-size: 12px">
54. <el-dropdown>
55. <i class="el-icon-setting" style="margin-right: 15px"></i>
56. <el-dropdown-menu slot="dropdown">
57. <el-dropdown-item>查看</el-dropdown-item>
58. <el-dropdown-item>新增</el-dropdown-item>
59. <el-dropdown-item>删除</el-dropdown-item>
60. </el-dropdown-menu>
61. </el-dropdown>
62. <span>王小虎</span>
63. </el-header>
64. 
65. <el-main>
66. <el-table :data="tableData">
67. <el-table-column prop="date" label="日期" width="140">
68. </el-table-column>
69. <el-table-column prop="name" label="姓名" width="120">
70. </el-table-column>
71. <el-table-column prop="address" label="地址">
72. </el-table-column>
73. </el-table>
74. </el-main>
75. </el-container>
76. </el-container>
77. 
78. <style>
79.   .el-header {
80.     background-color: #B3C0D1;
81.     color: #333;
82.     line-height: 60px;
83.   }
84. 
85.   .el-aside {
86.     color: #333;
87.   }
88. </style>
89. 
90. <script>
91.   export default {
92.     data() {
93.       const item = {
94. date: '2016-05-02',
95.         name: '王小虎',
96. address: '上海市普陀区金沙江路 1518 弄'
97.       };
98. return {
99.         tableData: Array(20).fill(item)
100.       }
101.     }
102.   };
103. </script>