添加内置class

Author: SmallRuralDog

public/0.js

@@ -6,7 +6,7 @@
     :value="selfValue"
     :attrs="attrs"
     :row="row"
-    :column_value="column_value"
+    :column-value="columnValue"
   />
 </template>
 <script>
@@ -15,24 +15,24 @@ export default {
     value: {
       default: null
     },
-    column_attr: Object,
+    columnAttr: Object,
     row: Object,
-    column_value: {
+    columnValue: {
       default: null
     }
   },
   computed: {
     attrs() {
-      return this.column_attr.displayComponentAttrs;
+      return this.columnAttr.displayComponentAttrs;
     },
     selfValue() {
       let value = this.value;
 
-      if (this.column_attr.itemPrefix) {
-        value = this.column_attr.itemPrefix + "" + this.value;
+      if (this.columnAttr.itemPrefix) {
+        value = this.columnAttr.itemPrefix + "" + this.value;
       }
-      if (this.column_attr.itemSuffix) {
-        value = this.value + "" + this.column_attr.itemSuffix;
+      if (this.columnAttr.itemSuffix) {
+        value = this.value + "" + this.columnAttr.itemSuffix;
       }
 
       return value;

public/app.js

@@ -2,11 +2,11 @@
   <div class="display-column">
     <template v-if="_.isArray(value)">
       <template v-for="(item, key) in value">
-        <Value :value="item" :column_attr="columnAttr" :key="key" :row="row" :column_value="value" />
+        <Value :value="item" :column-attr="columnAttr" :key="key" :row="row" :column-value="value" />
       </template>
     </template>
     <template v-else>
-      <Value :value="value" :column_attr="columnAttr" :row="row" :column_value="value" />
+      <Value :value="value" :column-attr="columnAttr" :row="row" :column-value="value" />
     </template>
   </div>
 </template>

public/vendor.js

@@ -165,7 +165,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="table-page">
+      <div class="table-page padding-sm">
         <el-pagination
           :layout="attrs.pageLayout"
           :hide-on-single-page="false"
@@ -444,9 +444,6 @@ export default {
 
 <style lang="scss">
 .grid-container {
-  .table-page {
-    padding: 8px 0;
-  }
   .grid-top-container {
     padding: 8px;
     display: flex;

resources/js/components/grid/Column.vue

@@ -1,3 +1,4 @@
+@import url(./base.scss);
 #app,
 body,
 html {
@@ -339,4 +340,4 @@ body {
 
 .justify-around {
 	justify-content: space-around;
-}
+}

resources/js/components/grid/ColumnDisplay.vue

@@ -0,0 +1,309 @@
+/*  -- 内外边距 -- */
+
+.margin-0 {
+	margin: 0;
+}
+
+.margin-xs {
+	margin: 5px;
+}
+
+.margin-sm {
+	margin: 10px;
+}
+
+.margin {
+	margin: 15px;
+}
+
+.margin-lg {
+	margin: 20px;
+}
+
+.margin-xl {
+	margin: 25px;
+}
+
+.margin-top-xs {
+	margin-top: 5px;
+}
+
+.margin-top-sm {
+	margin-top: 10px;
+}
+
+.margin-top {
+	margin-top: 15px;
+}
+
+.margin-top-lg {
+	margin-top: 20px;
+}
+
+.margin-top-xl {
+	margin-top: 25px;
+}
+
+.margin-right-xs {
+	margin-right: 5px;
+}
+
+.margin-right-sm {
+	margin-right: 10px;
+}
+
+.margin-right {
+	margin-right: 15px;
+}
+
+.margin-right-lg {
+	margin-right: 20px;
+}
+
+.margin-right-xl {
+	margin-right: 25px;
+}
+
+.margin-bottom-xs {
+	margin-bottom: 5px;
+}
+
+.margin-bottom-sm {
+	margin-bottom: 10px;
+}
+
+.margin-bottom {
+	margin-bottom: 15px;
+}
+
+.margin-bottom-lg {
+	margin-bottom: 20px;
+}
+
+.margin-bottom-xl {
+	margin-bottom: 25px;
+}
+
+.margin-left-xs {
+	margin-left: 5px;
+}
+
+.margin-left-sm {
+	margin-left: 10px;
+}
+
+.margin-left {
+	margin-left: 15px;
+}
+
+.margin-left-lg {
+	margin-left: 20px;
+}
+
+.margin-left-xl {
+	margin-left: 25px;
+}
+
+.margin-lr-xs {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.margin-lr-sm {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.margin-lr {
+	margin-left: 15px;
+	margin-right: 15px;
+}
+
+.margin-lr-lg {
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+.margin-lr-xl {
+	margin-left: 25px;
+	margin-right: 25px;
+}
+
+.margin-tb-xs {
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.margin-tb-sm {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.margin-tb {
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+
+.margin-tb-lg {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.margin-tb-xl {
+	margin-top: 25px;
+	margin-bottom: 25px;
+}
+
+.padding-0 {
+	padding: 0;
+}
+
+.padding-xs {
+	padding: 5px;
+}
+
+.padding-sm {
+	padding: 10px;
+}
+
+.padding {
+	padding: 15px;
+}
+
+.padding-lg {
+	padding: 20px;
+}
+
+.padding-xl {
+	padding: 25px;
+}
+
+.padding-top-xs {
+	padding-top: 5px;
+}
+
+.padding-top-sm {
+	padding-top: 10px;
+}
+
+.padding-top {
+	padding-top: 15px;
+}
+
+.padding-top-lg {
+	padding-top: 20px;
+}
+
+.padding-top-xl {
+	padding-top: 25px;
+}
+
+.padding-right-xs {
+	padding-right: 5px;
+}
+
+.padding-right-sm {
+	padding-right: 10px;
+}
+
+.padding-right {
+	padding-right: 15px;
+}
+
+.padding-right-lg {
+	padding-right: 20px;
+}
+
+.padding-right-xl {
+	padding-right: 25px;
+}
+
+.padding-bottom-xs {
+	padding-bottom: 5px;
+}
+
+.padding-bottom-sm {
+	padding-bottom: 10px;
+}
+
+.padding-bottom {
+	padding-bottom: 15px;
+}
+
+.padding-bottom-lg {
+	padding-bottom: 20px;
+}
+
+.padding-bottom-xl {
+	padding-bottom: 25px;
+}
+
+.padding-left-xs {
+	padding-left: 5px;
+}
+
+.padding-left-sm {
+	padding-left: 10px;
+}
+
+.padding-left {
+	padding-left: 15px;
+}
+
+.padding-left-lg {
+	padding-left: 20px;
+}
+
+.padding-left-xl {
+	padding-left: 25px;
+}
+
+.padding-lr-xs {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.padding-lr-sm {
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+.padding-lr {
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+.padding-lr-lg {
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.padding-lr-xl {
+	padding-left: 25px;
+	padding-right: 25px;
+}
+
+.padding-tb-xs {
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+.padding-tb-sm {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.padding-tb {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}
+
+.padding-tb-lg {
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.padding-tb-xl {
+	padding-top: 25px;
+	padding-bottom: 25px;
+}