[fix] selection display issue in complex mode

Ken Berkeley · Ken Berkeley · commit 3b30934eaf9a · 2017-09-15T14:54:48.000+08:00
diff --git a/dist/min.js b/dist/min.js
diff --git a/doc/en/details/README.md b/doc/en/details/README.md
@@ -10,11 +10,12 @@ src/
  │   ├─ ColumnGroup.vue
  │   └─ index.vue
  ├─ MainTable
- │   ├─ _SCROLLBAR_WIDTH.js
- │   ├─ _syncScroll.js
  │   ├─ HeadSort.vue
  │   ├─ index.vue
  │   ├─ MultiSelect.vue
+ │   ├─ SCROLLBAR_WIDTH.js
+ │   ├─ shouldRenderSelection.mixin.js
+ │   ├─ syncScroll.js
  │   ├─ TableBody.vue
  │   ├─ TableFooter.vue
  │   ├─ TableFrame.vue
diff --git a/doc/zh-cn/details/README.md b/doc/zh-cn/details/README.md
@@ -10,11 +10,12 @@ src/
  │   ├─ ColumnGroup.vue
  │   └─ index.vue
  ├─ MainTable
- │   ├─ _SCROLLBAR_WIDTH.js
- │   ├─ _syncScroll.js
  │   ├─ HeadSort.vue
  │   ├─ index.vue
  │   ├─ MultiSelect.vue
+ │   ├─ SCROLLBAR_WIDTH.js
+ │   ├─ shouldRenderSelection.mixin.js
+ │   ├─ syncScroll.js
  │   ├─ TableBody.vue
  │   ├─ TableFooter.vue
  │   ├─ TableFrame.vue
diff --git a/examples/src/Fixed/index.vue b/examples/src/Fixed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="margin: 0 auto; width: 720px">
+  <div style="margin: 0 auto; width: 800px">
     <code>query: {{ query }}</code>
     <datatable v-bind="$data" />
   </div>
diff --git a/src/MainTable/MultiSelect.vue b/src/MainTable/MultiSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <input type="checkbox" v-model="status" @change="toggle" name="MultiSelect">
+  <input type="checkbox" v-model="status" @change="toggle" style="margin: 0" name="MultiSelect">
 </template>
 <script>
 import replaceWith from 'replace-with'
diff --git a/src/MainTable/SCROLLBAR_WIDTH.js b/src/MainTable/SCROLLBAR_WIDTH.js
diff --git a/src/MainTable/TableBody.vue b/src/MainTable/TableBody.vue
@@ -3,7 +3,7 @@
     <template v-if="data.length">
       <template v-for="item in data">
         <tr>
-          <td v-if="selection" width="30px">
+          <td v-if="shouldRenderSelection">
             <multi-select :selection="selection" :row="item" />
           </td>
           <td v-for="col in columns" :class="col.tdClass" :style="col.tdStyle">
@@ -47,10 +47,11 @@
 <script>
 import MultiSelect from './MultiSelect.vue'
 import props from '../props.mixin'
+import shouldRenderSelection from './shouldRenderSelection.mixin'
 
 export default {
-  mixins: [props],
   components: { MultiSelect },
+  mixins: [props, shouldRenderSelection],
   computed: {
     colLen () {
       return this.columns.length + !!this.selection
diff --git a/src/MainTable/TableFooter.vue b/src/MainTable/TableFooter.vue
@@ -1,7 +1,7 @@
 <template>
   <tfoot>
     <tr class="-summary-row">
-      <td v-if="selection" width="30px"></td>
+      <td v-if="shouldRenderSelection"></td>
       <template v-for="(col, idx) in columns">
         <!-- display the available fields only -->
         <td v-if="summary[col.field]" :class="col.tdClass" :style="col.tdStyle">
@@ -25,9 +25,10 @@
 </template>
 <script>
 import props from '../props.mixin'
+import shouldRenderSelection from './shouldRenderSelection.mixin'
 
 export default {
-  mixins: [props]
+  mixins: [props, shouldRenderSelection]
 }
 </script>
 <style>
diff --git a/src/MainTable/TableFrame.vue b/src/MainTable/TableFrame.vue
@@ -1,15 +1,17 @@
 <template>
   <table class="table table-striped table-hover" style="margin-bottom: 0" :class="tblClass" :style="tblStyle">
     <colgroup>
+      <col v-if="shouldRenderSelection" style="width: 30px"></col>
       <col v-for="col in columns" :class="col.colClass" :style="col.colStyle"></col>
     </colgroup>
     <slot />
   </table>
 </template>
 <script>
 import props from '../props.mixin'
+import shouldRenderSelection from './shouldRenderSelection.mixin'
 
 export default {
-  mixins: [props]
+  mixins: [props, shouldRenderSelection]
 }
 </script>
diff --git a/src/MainTable/TableHeader.vue b/src/MainTable/TableHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <thead>
     <transition-group name="fade" tag="tr">
-      <th v-if="selection" width="30px" key="--th-multi">
+      <th v-if="shouldRenderSelection" key="--th-multi">
         <multi-select :selection="selection" :rows="data" />
       </th>
       <th v-for="(col, idx) in columns"
@@ -30,9 +30,10 @@
 import HeadSort from './HeadSort.vue'
 import MultiSelect from './MultiSelect.vue'
 import props from '../props.mixin'
+import shouldRenderSelection from './shouldRenderSelection.mixin'
 
 export default {
   components: { HeadSort, MultiSelect },
-  mixins: [props]
+  mixins: [props, shouldRenderSelection]
 }
 </script>
diff --git a/src/MainTable/index.vue b/src/MainTable/index.vue
@@ -14,8 +14,8 @@
           :style="x === 'Header'
             ? { right: fixHeaderAndSetBodyHeight && SCROLLBAR_WIDTH }
             : styleForRightFixedTable">
-          <table-frame v-bind="propsToRightFixedTable">
-            <component :is="`Table${x}`" v-bind="propsToRightFixedTable" />
+          <table-frame v-bind="propsToRightFixedTable" no-selection>
+            <component :is="`Table${x}`" v-bind="propsToRightFixedTable" no-selection />
           </table-frame>
         </div>
         <table-frame v-bind="propsToNormalTable">
@@ -37,8 +37,8 @@ import TableFrame from './TableFrame.vue'
 import TableHeader from './TableHeader.vue'
 import TableBody from './TableBody.vue'
 import TableFooter from './TableFooter.vue'
-import syncScroll from './_syncScroll'
-import SCROLLBAR_WIDTH from './_SCROLLBAR_WIDTH'
+import syncScroll from './syncScroll'
+import SCROLLBAR_WIDTH from './SCROLLBAR_WIDTH'
 import props from '../props.mixin'
 
 export default {
diff --git a/src/MainTable/shouldRenderSelection.mixin.js b/src/MainTable/shouldRenderSelection.mixin.js
@@ -0,0 +1,10 @@
+export default {
+  props: {
+    noSelection: Boolean
+  },
+  computed: {
+    shouldRenderSelection () {
+      return !this.noSelection && this.selection
+    }
+  }
+}
diff --git a/src/MainTable/syncScroll.js b/src/MainTable/syncScroll.js
