feat: 非固定层的固定列应设置为不可见状态

tm-fe · Sep 29, 2019 · e8bc119 · e8bc119
1 parent 8ab2f3d
commit e8bc119
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/src/css/main.less b/src/css/main.less
@@ -206,6 +206,9 @@
             border-color: #ccc;
         }
     }
+    &-hidden{
+        visibility: hidden;
+    }
     &-tip{
         text-align: center;
     }

diff --git a/src/tableFoot.vue b/src/tableFoot.vue
@@ -3,7 +3,10 @@
     <div class="flex-table-foot" :style="{ height: height }">
         <div class="flex-table-row">
             <div 
-                class="flex-table-col" 
+                :class="{
+                    'flex-table-col': true,
+                    'flex-table-hidden': isInvisible(item)
+                    }" 
                 v-for="(item, index) in columns"
                 :key="index"
                 :style="setCellStyle(item)"
@@ -79,6 +82,9 @@ export default {
         },
         shouldRender(item) {
             return this.sum[item.key] !== undefined && !this.isHidden(item)
+        },
+        isInvisible(col) { // 非固定层的固定列应不可见
+            return col.fixed && !this.onlyFixed;
         }
     }
 }

diff --git a/src/tableHead.vue b/src/tableHead.vue
@@ -2,9 +2,12 @@
     <div class="flex-table-head" :style="{ height: height }">
         <div class="flex-table-row">
             <div
-                class="flex-table-col"
                 v-for="(item, index) in headRow"
                 :key="item.key + '_' + index"
+                :class="{
+                    'flex-table-col': true,
+                    'flex-table-hidden': isInvisible(item)
+                    }"
                 :style="setCellStyle(item)"
             >
                 <template v-if="!isHidden(item)">
@@ -138,6 +141,9 @@ export default {
         },
         isHidden(item) {
             return this.onlyFixed && (item.fixed !== this.onlyFixed);
+        },
+        isInvisible(col) { // 非固定层的固定列应不可见
+            return col.fixed && !this.onlyFixed;
         }
     }
 }

diff --git a/src/tableTd.vue b/src/tableTd.vue
@@ -4,6 +4,7 @@
             'flex-table-col': true,
             'flex-table-col-icon': renderType === 'expand',
             'flex-table-expand-disabled': renderType === 'expand' && row._disableExpand,
+            'flex-table-hidden': isInvisible
             }"
         :style="setCellStyle(column)"
         @click="onToggleExpand"
@@ -84,8 +85,11 @@ export default {
         }
     },
     computed: {
-        isHidden() {
+        isHidden() { // 固定层的非固定列无需渲染
             return this.onlyFixed && (this.column.fixed !== this.onlyFixed);
+        },
+        isInvisible() { // 非固定层的固定列应不可见
+            return this.column.fixed && !this.onlyFixed;
         }
     },
     created(){