ok

components/page/dataGrid.vue

 <template>
-  <div class="table-content myBug flex fd">
-    <div class="table-tools" v-if="tool" ref="tools">
+  <div class="table-content">
+    <div class="table-tools" v-if="tool">
       <div class="table-search" v-if="easy">
         <slot name="easySearch">
           <Input
@@ -11,30 +11,28 @@
             v-model="keys"
           />
         </slot>
+        <Button v-if="high" @click="modalSearch=true" type="text">
+          <Icon type="md-search" />高级
+        </Button>
       </div>
-      <Button v-if="high" @click="modalSearch=true" type="text">
-        <Icon type="md-search" />高级
-      </Button>
       <div class="searchBack">
         <slot name="searchBack"></slot>
       </div>
       <div class="btns">
         <slot name="buttons"></slot>
         <Button v-if="set&&type=='table'" @click="config=!config">
-          <Icon type="md-build" class="table-set" size="14" title="列设置" />
+          <Icon type="md-build" title="列设置" />
         </Button>
       </div>
     </div>
-    <div class="fg" ref="ftable">
-      <div v-if="type=='card'" class="table-card">
-        <Row :gutter="gutter">
-          <Col :span="span" v-for="(row,i) in list" :key="i">
-            <slot name="card" :row="row">
-              <span>{{row.id}}</span>
-            </slot>
-          </Col>
-        </Row>
-      </div>
+    <div class="table-main" ref="main">
+      <Row v-if="type=='card'">
+        <Col :span="span" v-for="(row,i) in list" :key="i">
+          <slot name="card" :row="row">
+            <span>{{row.id}}</span>
+          </slot>
+        </Col>
+      </Row>
       <Table
         v-else
         :border="border"
@@ -42,35 +40,30 @@
         :data="list"
         :height="tableHeight"
         :draggable="draggable"
-        :size="size"
-        :row-key="rowKey"
         ref="table"
-        class="tableCommon fg"
+        class="tableCommon"
         @on-expand="expand"
         @on-drag-drop="onDragDrop"
         @on-selection-change="selectionChange"
         @on-select="onSelect"
-        :loading="loading"
       ></Table>
-      <div class="table-footer" ref="footer">
-        <div>
-          <slot name="footer"></slot>
-        </div>&nbsp;
-        <Page
-          v-if="page"
-          :total="search.total"
-          :current="search.page"
-          class="mr15 mt15 fr"
-          show-total
-          size="small"
-          show-elevator
-          show-sizer
-          :page-size="search.pageSize"
-          :page-size-opts="pageSizeOpts"
-          @on-change="pageChange"
-          @on-page-size-change="pageSizeChange"
-        />
-      </div>
+    </div>
+    <div class="table-footer">
+      <slot name="footer"></slot>
+      <Page
+        v-if="page"
+        :total="search.total"
+        :current="search.page"
+        class="fr"
+        show-total
+        size="small"
+        show-elevator
+        show-sizer
+        :page-size="search.pageSize"
+        :page-size-opts="pageSizeOpts"
+        @on-change="pageChange"
+        @on-page-size-change="pageSizeChange"
+      />
     </div>
     <Modal v-if="high" v-model="modalSearch" title="高级搜索" draggable width="800" ref="search">
       <slot name="searchForm"></slot>
@@ -107,13 +100,10 @@
         </li>
       </ul>
     </Drawer>
-    <FooterToolbar style="height:60px" v-if="batch" v-show="footerToolbar">
-      <div class="tip">
-        已选{{selectItems.length}}项
-        <slot name="batch"></slot>
-      </div>
-
-      <Button @click="cancelFooterToolbar" class="btn">取消</Button>
+    <FooterToolbar v-if="batch" v-show="footerToolbar">
+      <div class="tip">已选{{selectItems.length}}项</div>
+      <slot name="batch"></slot>
+      <Button @click="footerToolbar=false">取消</Button>
     </FooterToolbar>
   </div>
 </template>
@@ -141,8 +131,7 @@ export default {
       configLoad: false,
       userConfig: null, //用户页面配置信息。,
       // userId: 1
-      userId: this.$store.state.userInfo.userId,
-      loading: false
+      userId: this.$store.state.userInfo.userId
     };
   },
   props: {
@@ -165,10 +154,6 @@ export default {
       type: String,
       default: "请输入关键字"
     },
-    size: {
-      type: String,
-      default: "default"
-    },
     height: {
       type: Number,
       default: 0
@@ -237,17 +222,9 @@ export default {
         return ["table", "card", "list"].indexOf(value) !== -1;
       }
     },
-    gutter:{
-      type:Number,
-      default:0
-    },
     span: {
       type: Number,
       default: 24
-    },
-    //table控件children子数据控制功能
-    rowKey: {
-      type: [String, Number]
     }
   },
   created() {
@@ -261,28 +238,29 @@ export default {
   mounted() {
     if (this.data && this.data.length > 0) {
       this.list = this.data;
-      //return;
+      return;
     }
     this.keys = "";
     this.intY();
     if (this.lazy == true) {
       return;
     }
-    this.loadUserConfig();
-
+    if (this.userId > 0) {
+      this.loadUserConfig();
+    } else {
+      this.easySearch();
+    }
     if (this.height === 0) {
+      this.tableHeight = this.$refs.main.offsetHeight;
       window.onresize = () => {
         ///浏览器窗口大小变化
         return (() => {
-          // console.log(this.$refs.table)
-          window.screenHeight = window.innerHeight;
-          this.tableHeight = window.screenHeight - this.firstY - 60;
+          this.tableHeight = this.$refs.main.offsetHeight;
         })();
       };
     } else {
       this.tableHeight = this.height;
     }
-
     //注册拖拽事件。
     this.$dragging.$on("dragend", e => {
       // console.log("dragend",e);
@@ -296,20 +274,10 @@ export default {
         this.tableHeight = window.innerHeight - this.firstY - 60;
       }
       if (this.action) {
-        this.loading = true;
-        this.$api
-          .post(this.action, this.search)
-          .then(r => {
-            this.list = r.result.items;
-            this.search.total = r.result.totalCount;
-            this.loading = false;
-          })
-          .catch(
-            function(err) {
-              this.loading = false;
-              this.$Message.error("加载失败");
-            }.bind(this)
-          );
+        this.$api.post(this.action, this.search).then(r => {
+          this.list = r.result.items;
+          this.search.total = r.result.totalCount || r.result.count;
+        });
       }
     },
     columnInit() {
@@ -401,11 +369,7 @@ export default {
       this.$emit("on-drag-drop", a, b);
     },
     easySearch() {
-      if (
-        this.conditions &&
-        this.conditions.keys &&
-        this.conditions.keys.default
-      ) {
+      if (this.conditions && this.conditions.keys.default) {
         //判断没有传入条件的用默认的查询
         this.conditions.keys.value = this.keys;
       }
@@ -487,10 +451,6 @@ export default {
     },
     selectAll(status) {
       this.$refs.table.selectAll(status);
-    },
-    cancelFooterToolbar() {
-      this.$refs.table.selectAll(false);
-      this.footerToolbar = false;
     }
   },
   computed: {
@@ -533,16 +493,6 @@ export default {
             });
           };
         }
-        if (u.type == "outputTime") {
-          u.render = (h, params) => {
-            let values = u.key;
-            return h("OutputTime", {
-              props: {
-                value: params.row[values]
-              }
-            });
-          };
-        }
         return !u.hide;
       });
       return cols;
@@ -559,69 +509,51 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .table-content {
   position: relative;
   height: 100%;
-  .table-tools {
-    padding-top: 5px;
-    height: 50px;
-    overflow: hidden;
-    .table-search {
-      float: left;
-      line-height: 50px;
-      .ivu-form-item {
-        margin-bottom: 0;
-      }
-    }
-    .btns {
-      float: right;
-      text-align: right;
-      height: 40px;
-    }
-  }
-  .tableCommon {
-    width: 100%;
-  }
+  display: flex;
+  flex-direction: column;
   .tip {
     display: inline;
   }
-  .tableCommon tr th {
-    line-height: 30px;
-    font-size: 14px;
-    background: #f5f6fa;
-  }
-  .fg {
-    overflow: auto;
-    .table-card{
-      overflow: hidden;
+  form {
+    display: inline-block;
+    .ivu-form-item {
+      margin: 0;
+      vertical-align: middle;
     }
   }
-  .tableCommon tr td {
-    line-height: 25px;
-    font-size: 14px;
-    padding: 0 2px;
-  }
-
-  .tableCommon tr td .ivu-table-cell {
-    padding: 0 5px;
-  }
-  .table-card {
+  .table-main {
     width: 100%;
     text-align: left;
     padding: 0;
     display: block;
     overflow-y: auto;
+    flex-grow: 1;
+    tr td .ivu-table-cell {
+      padding: 0 5px;
+    }
   }
-
-  .table-set {
-    cursor: pointer;
-  }
-  .table-set:hover {
-    color: orange;
+  .table-tools {
+    display: flex;
+    line-height: 50px;
+    .table-search {
+      flex-grow: 1;
+    }
+    .btns {
+      min-width: 200px;
+      text-align: right;
+    }
   }
   .table-footer {
-    height: 40px;
+    line-height: 45px;
+  }
+  .ivu-footer-toolbar {
+    text-align: left;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
   }
 }
 .table-columns {