fix CSS in HeaderSettings

Ken Berkeley · Ken Berkeley · commit cc2f5a4357ee · 2018-01-15T12:27:59.000+08:00
diff --git a/doc/en/details/props-data.md b/doc/en/details/props-data.md
@@ -15,10 +15,11 @@ watch: {
       const { supportNested } = this
       // support nested components feature with extra magic
       if (supportNested) {
+        const MAGIC_FIELD = '__nested__'
         data.forEach(item => {
-          if (!item.__nested__) {
-            this.$set(item, '__nested__', {
-              comp: '', // name of the current nested component
+          if (!item[MAGIC_FIELD]) {
+            this.$set(item, MAGIC_FIELD, {
+              comp: undefined, // current nested component
               visible: false,
               $toggle (comp, visible) {
                 switch (arguments.length) {
@@ -31,6 +32,7 @@ watch: {
                         this.visible = comp
                         break
                       case 'string':
+                      case 'object':
                         this.comp = comp
                         this.visible = !this.visible
                         break
@@ -44,7 +46,7 @@ watch: {
               }
             })
             // omit the implementation of accordion...
-            Object.defineProperty(item, '__nested__', { enumerable: false })
+            Object.defineProperty(item, MAGIC_FIELD, { enumerable: false })
           }
         })
       }
diff --git a/doc/zh-cn/details/props-data.md b/doc/zh-cn/details/props-data.md
@@ -12,10 +12,11 @@ watch: {
       const { supportNested } = this
       // support nested components feature with extra magic
       if (supportNested) {
+        const MAGIC_FIELD = '__nested__'
         data.forEach(item => {
-          if (!item.__nested__) {
-            this.$set(item, '__nested__', {
-              comp: '', // name of the current nested component
+          if (!item[MAGIC_FIELD]) {
+            this.$set(item, MAGIC_FIELD, {
+              comp: undefined, // current nested component
               visible: false,
               $toggle (comp, visible) {
                 switch (arguments.length) {
@@ -28,6 +29,7 @@ watch: {
                         this.visible = comp
                         break
                       case 'string':
+                      case 'object':
                         this.comp = comp
                         this.visible = !this.visible
                         break
@@ -41,7 +43,7 @@ watch: {
               }
             })
             // 省略手风琴的实现...
-            Object.defineProperty(item, '__nested__', { enumerable: false })
+            Object.defineProperty(item, MAGIC_FIELD, { enumerable: false })
           }
         })
       }
diff --git a/src/HeaderSettings/ColumnGroup.vue b/src/HeaderSettings/ColumnGroup.vue
@@ -51,8 +51,9 @@ export default {
 <style>
 .-col-group {
   display: inline-block;
-  width: 150px;
+  margin-bottom: 5px;
   padding: 0;
+  width: 150px;
   vertical-align: top;
 }
 .-col-group-title {
diff --git a/src/HeaderSettings/index.vue b/src/HeaderSettings/index.vue
@@ -11,7 +11,7 @@
           :group-name="groupName" :columns="columns">
         </column-group>
       </div>
-      <div class="clearfix" style="margin: 10px">
+      <div class="clearfix" style="margin: 10px 0">
         <div class="btn-group btn-group-sm pull-right">
           <button class="btn btn-default" type="button" @click="apply()">
             {{ $i18nForDatatable('Apply') }}
