feat:增加全屏固定头部&固定列样式

tm-fe · Jan 9, 2020 · 82980e0 · 82980e0
1 parent 2676864
commit 82980e0
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 22 deletions.
diff --git a/examples/app.vue b/examples/app.vue
@@ -39,10 +39,9 @@ ul,
 li {
     padding: 0;
     margin: 0;
-    overflow: hidden;
 }
 .container {
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-flow: column;
     header {
@@ -61,6 +60,8 @@ li {
 }
 .main {
     flex: 1;
+    display: flex;
+    align-items: stretch;
     position: relative;
 }
 .btn-box{
@@ -78,10 +79,6 @@ li {
     flex-shrink: 0;
     overflow-x: hidden;
     overflow-y: auto;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
     background: #fcfcfc;
     ul li{
         list-style: none;
@@ -108,13 +105,8 @@ li {
     }
 }
 .cont {
-    position: absolute;
     padding: 20px;
-    top: 0;
-    left: 181px;
-    right: 0;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
+    width: 0;
+    flex: 1;
 }
 </style>
diff --git a/examples/features/selectable.vue b/examples/features/selectable.vue
@@ -8,6 +8,7 @@
         :columns="columns" 
         :data="list"
         :sum="sum"
+        :fixed-head="true"
         :async-render="10"
         @on-selection-change="onSelectionChange"
         @on-selection-cancel="onSelectionCancel"
@@ -20,11 +21,12 @@
 
 
 const aTestList = [];
-for(let i=0;i<200;i++){
+for(let i=0;i<80;i++){
     const oTestData = {
         name: 'John Brown',
         age: 18,
         address: 'New York No. 1 Lake Park',
+        real_address: 'New York No. 1 Lake Park',
         date: '2016-10-03',
     };
     aTestList.push(oTestData);
@@ -46,21 +48,30 @@ export default {
                 {
                     title: 'Name',
                     key: 'name',
+                    width: 150
                 },
                 {
                     title: 'Age',
                     key: 'age',
+                    width: 150,
                     render(h, params){
                         return h('span', 'age: '+ params.row.age)
                     }
                 },
                 {
                     title: 'Address',
                     key: 'address',
+                    width: 250,
+                },
+                {
+                    title: 'Real Address',
+                    key: 'real_address',
+                    width: 250,
                 },
                 {
                     title: 'Date',
                     key: 'date',
+                    width: 250
                 },
             ],
             loading: false,

diff --git a/examples/routes.js b/examples/routes.js
@@ -68,7 +68,7 @@ export default [
         name: 'selectable',
         component: resolve => require(['./features/selectable.vue'], resolve),
         meta: {
-            title: '多选',
+            title: '多选/全屏固定头部',
         },
     },
     {

diff --git a/readme.md b/readme.md
@@ -133,8 +133,14 @@ export default {
 | height | 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 | Number | - |
 | no-data | 数据为空时显示的提示内容 | String | No Data |
 | asyncRender | 不为 0 时使用异步渲染模式，mounted 触发前渲染的行数(建议是刚好首屏，**见后文详细说明**) | number | 0 |
-| minWidth | 最小列宽 | number | 40 |
+| minWidth | 最小列宽 | Number | 40 |
 | maxWidth | 拖动调整时，可调的最大列宽, 默认不限制 | number | - |
+| size | 表格大小 default/big/small | String | default |
+| theme | 颜色 light/dark | String | light |
+| border | 边框显示 | Boolean | true |
+| stripe | 行的斑纹显示 | Boolean | true |
+| fixedHead | 全屏固定头部 | Boolean | false |
+| fixedHeadTop | 全屏固定头部离顶部距离 | Number | 0 |
 
 ### Table events
 

diff --git a/src/css/main.less b/src/css/main.less
@@ -27,6 +27,31 @@
             .@{fb}-body .@{fb}-tr .@{fb}-row:nth-child(odd){
                 background: none;
             }
+            .@{fb}-body .@{fb}-tr .@{fb}-row.@{fb}-hover{
+                background-color: #ebf7ff;
+            }
+            &.@{fb}-dark{
+                .@{fb}-body .@{fb}-tr .@{fb}-row.@{fb}-hover{
+                    background-color: #888;
+                }
+            }
+        }
+    }
+    &-head-fixed-layout{
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: #fff;
+        &.is-fixed{
+            position: fixed;
+            box-shadow: 0 2px 2px rgba(0,0,0,.08);
+        }
+    }
+    &-head-fixed{
+        width: 100%;
+        overflow-x: auto;
+        &::-webkit-scrollbar {
+            display: none;
         }
     }
     &-big{
@@ -111,6 +136,7 @@
                 // &:hover,
                 &.@{fb}-hover{
                     background-color: #ebf7ff;
+                    box-shadow: 0 2px 2px rgba(0,0,0,.08);
                 }
             }
         }
@@ -119,6 +145,9 @@
         color:#fff;
         .@{fb}{
             background-color: #333;
+            &-head-fixed{
+                background-color: #333;
+            }
             &-body{
                 .@{fb}-row{
                     &:nth-child(odd){
@@ -259,7 +288,9 @@
         left: 0;
         overflow: hidden;
         background-color: #fff;
-        box-shadow: 2px 0 6px -2px rgba(0,0,0,.2);
+        &.is-scroll{
+            box-shadow: 2px 0 6px -2px rgba(0,0,0,.2);
+        }
 
         .@{fb}-body{
             overflow: hidden;