更改布局方式避免滚动条

Former-commit-id: ccaa4eb9a626e341ce5daf9b8cb30bdd24f621af [formerly ccaa4eb9a626e341ce5daf9b8cb30bdd24f621af [formerly ccaa4eb9a626e341ce5daf9b8cb30bdd24f621af [formerly ccaa4eb9a626e341ce5daf9b8cb30bdd24f621af [formerly 96163a37ebe68643b54d5ac0b88077f9c3db761e [formerly 8a0483c27e3bb7c1b88792fb4ecb6d6bb9b35f4b]]]]]
Former-commit-id: 30090992d218f90459bfb3319e20edffa7f40484
Former-commit-id: a74c09ee0c415f7c60839b133fc8de0e02f57adc
Former-commit-id: e2222e703d80aded2f542f58518c63e65c6613f0 [formerly baeeeac7635c2444811d942aef9977bb34980916]
Former-commit-id: b09e8b36f3e4f36fb191b95780cd25ebbec5ab5a
Former-commit-id: 352379011e490ce32770429e3ba9155861cf4c45
Former-commit-id: 290ef5d44eb39ecc33173cdd240c4e218b78b84d
Former-commit-id: e4a4af62251dbbcd117bb5c74bc796c4befcd1bd
Former-commit-id: 6c1e0f033bce97347bd8aae5b29084fb093fd496

src/main.js

@@ -1,7 +1,6 @@
 import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App'
-// flex.css
 import 'flex.css'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

src/pages/demo/playground/store/menu/index.vue

@@ -1,46 +1,21 @@
 <template>
-  <d2-container type="ghost">
-    <template slot="header">菜单控制试验台</template>
-    <el-row :gutter="20" class="d2-mt d2-mb">
-      <el-col :span="12">
-        <el-card shadow="never" class="d2-card">
-          <template slot="header">顶栏菜单</template>
-          <el-button-group class="d2-mb">
-            <el-button @click="handleMenuHeaderSet">设置空菜单</el-button>
-            <el-button @click="menuHeaderReset">恢复</el-button>
-          </el-button-group>
-          <div style="height: 400px; overflow: auto;">
-            <d2-highlight :code="JSON.stringify(menuHeader, null, 2)"/>
-            <!-- <tree-view
-              class="tree-view-small"
-              :data="menuHeader"
-              :options="{
-                rootObjectKey: 'menuHeader',
-                maxDepth: 1
-              }"/> -->
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card shadow="never" class="d2-card">
-          <template slot="header">侧栏菜单</template>
-          <el-button-group class="d2-mb">
-            <el-button @click="handleMenuAsideSet">设置空菜单</el-button>
-            <el-button @click="menuAsideReset">恢复</el-button>
-          </el-button-group>
-          <div style="height: 400px; overflow: auto;">
-            <d2-highlight :code="JSON.stringify(menuAside, null, 2)"/>
-            <!-- <tree-view
-              class="tree-view-small"
-              :data="menuAside"
-              :options="{
-                rootObjectKey: 'menuAside',
-                maxDepth: 1
-              }"/> -->
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
+  <d2-container>
+    <el-tabs>
+      <el-tab-pane label="顶栏菜单">
+        <el-button-group class="d2-mb">
+          <el-button @click="handleMenuHeaderSet">设置顶栏空菜单</el-button>
+          <el-button @click="menuHeaderReset">恢复顶栏菜单</el-button>
+        </el-button-group>
+        <d2-highlight :code="JSON.stringify(menuHeader, null, 2)"/>
+      </el-tab-pane>
+      <el-tab-pane label="侧栏菜单">
+        <el-button-group class="d2-mb">
+          <el-button @click="handleMenuAsideSet">设置侧栏空菜单</el-button>
+          <el-button @click="menuAsideReset">恢复侧栏菜单</el-button>
+        </el-button-group>
+        <d2-highlight :code="JSON.stringify(menuAside, null, 2)"/>
+      </el-tab-pane>
+    </el-tabs>
   </d2-container>
 </template>