fixed scoll bar

huanghong
1 parent eec3859c
Showing 3 changed files with 81 additions and 9 deletions Show diff stats
examples/routers/table.vue
src/components/table/table-head.vue
src/components/table/table.vue
@@ -9,6 +9,8 @@
         <br><br><br><br><br>
         <Table border :columns="columns6" :data="data5"></Table>
         <br><br><br><br><br>
+        <Table border :columns="columns7"  height="240" :data="data7"></Table>
+        <br><br><br><br><br>
     </div>
 </template>
 <script>
@@ -103,19 +105,19 @@
                             }
                         ]
                     },
+                    // {
+                    //     title: 'Gender',
+                    //     key: 'gender',
+                    //     align: 'center',
+                    //     width: 200,
+                    //     fixed: 'right'
+                    // },
                     {
                         title: 'Gender',
                         key: 'gender',
                         align: 'center',
                         width: 200,
-                        fixed: 'right'
-                    },
-                    {
-                        title: 'Gender',
-                        key: 'gender',
-                        align: 'center',
-                        width: 200,
-                        fixed: 'right'
+                        //fixed: 'right'
                     }
                 ],
                 columns2: [
@@ -342,6 +344,55 @@
                         }
                     }
                 ],
+                
+                columns7: [
+                    {
+                        title: 'Date',
+                        key: 'date',
+                        sortable: true,
+                        width:200,
+                    },
+                    {
+                        title: 'Name',
+                        key: 'name',
+                        width:200,
+                    },
+                    {
+                        title: 'Age',
+                        key: 'age',
+                    },
+                    {
+                        title: 'Address',
+                        key: 'address',
+                        width:200,
+                    }
+                ],
+                data7: [
+                    {
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        date: '2016-10-03'
+                    },
+                    {
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'London No. 1 Lake Park',
+                        date: '2016-10-01'
+                    },
+                    {
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
+                        date: '2016-10-02'
+                    },
+                    {
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
+                        date: '2016-10-04'
+                    }
+                ],
             }
         },
         mounted () {
@@ -61,7 +61,7 @@
                     </div>
                 </th>
-                <th v-if="$parent.showVerticalScrollBar" :rowspan="headRows.length"></th>
+                <th v-if="$parent.showVerticalScrollBar && rowIndex===0" :class='scrollBarCellClass()' :rowspan="headRows.length"></th>
             </tr>
         </thead>
     </table>
@@ -131,6 +131,23 @@
                     }
                 ];
             },
+            scrollBarCellClass(){
+                let hasRightFixed = false;
+                for(var i in this.headRows){
+                    for(var j in this.headRows[i]){
+                        if(this.headRows[i][j].fixed === 'right') {
+                            hasRightFixed=true;
+                            break;
+                        }
+                        if(hasRightFixed) break;
+                    }
+                }
+                return [
+                    {
+                        [`${this.prefixCls}-hidden`]: hasRightFixed
+                    }
+                ];
+            },
             itemClasses (column, item) {
                 return [
                     `${this.prefixCls}-filter-select-item`,
@@ -896,6 +896,10 @@
             height () {
                 this.handleResize();
                 this.fixedHeader();
+            },
+            showHorizontalScrollBar () {
+                this.handleResize();
+                this.fixedHeader();
             }
         }
     };