feat: 优化模态框样式

Author: wangkaiwd

src/assets/styles/base.scss

@@ -1,7 +1,9 @@
 @import "vars";
+
 body {
   color: #515a6e;
 }
+
 .search-form {
   padding: 10px;
   background-color: $gray;
@@ -28,6 +30,8 @@ body {
     color: #1f2d3d;
   }
 }
+
+// 菜单收缩后展示养生师
 .el-menu--popup {
   z-index: 10002;
   .el-menu-item,
@@ -36,3 +40,11 @@ body {
     line-height: 42px;
   }
 }
+
+.el-dialog {
+  .el-dialog__body {
+    min-height: 100px;
+    max-height: 60vh;
+    overflow: auto;
+  }
+}

src/components/editTable/analyze.txt

@@ -13,7 +13,7 @@
     },
     render (h, ctx) {
       const { row, index, column, render } = ctx.props;
-      return render(h, { row, index, column });
+      return render({ row, index, column });
     }
   };
 </script>

src/components/editTable/colRender.vue

@@ -75,7 +75,7 @@
         const editColumns = this.columns.map(col => {
           if ('editable' in col) {
             const { widget, trigger, ...rest } = col.editable;
-            const render = (h, { row, column, index }) => {
+            const render = ({ row, column, index }) => {
               const isEditing = this.editIds.includes(`${column.prop}_${index}`);
               return (
                 <el-row type="flex" align="middle" gutter={16} class="edit-col">

src/components/editTable/index.vue

@@ -12,7 +12,8 @@ const tableTemplate = {
       id: '@id',
       name: '@cname',
       'age|1-100': 100,
-      email: '@email'
+      email: '@email',
+      address: '@county(true)'
     }
   ]
 };

src/mock/index.js

@@ -1,9 +1,28 @@
 <template>
-  <edit-table
-    :columns="columns"
-    :tableData="tableData"
-  >
-  </edit-table>
+  <div class="admin-table">
+    <el-button
+      class="json-button"
+      type="primary"
+      @click="dialogVisible=true"
+    >
+      查看当前表格数据
+    </el-button>
+    <edit-table
+      :columns="columns"
+      :tableData="tableData"
+    >
+    </edit-table>
+    <el-dialog
+      title="表格数据"
+      :visible.sync="dialogVisible"
+      @close="dialogVisible=false"
+    >
+      <el-card>
+        <pre><code>{{tableData}}</code></pre>
+      </el-card>
+    </el-dialog>
+  </div>
+
 </template>
 
 <script>
@@ -34,17 +53,21 @@
               style: { width: '100px' }
             }
           },
-          { prop: 'email', label: '邮箱' }
+          { prop: 'email', label: '邮箱', width: '220' },
+          { prop: 'address', label: '地址' },
         ],
-        tableData: data.dataSource
+        tableData: data.dataSource,
+        dialogVisible: false
       };
     },
+    computed: {}
   };
 </script>
 
 <style lang="scss" scoped>
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
-    min-height: 400px;
+  .admin-table {
+    .json-button {
+      margin-bottom: 20px;
+    }
   }
 </style>