修改gird组件 loading效果

src/components/gird/main.css

@@ -36,14 +36,12 @@
   display: none;
 }
 
-
 .empty-text {
   width: 100%;
   text-align: center;
   padding: 28px 0;
-	color: rgba(0, 0, 0, .6);
+  color: rgba(0, 0, 0, 0.6);
   font-size: 12px;
-
 }
 
 .th-tr {
@@ -51,7 +49,6 @@
   height: auto;
   min-height: 40px;
   display: flex;
-
 }
 
 .tr {
@@ -62,9 +59,7 @@
 }
 
 .tr.active {
-	
   background-color: #ebf2f7 !important;
-	
 }
 
 .tfoot {
@@ -73,7 +68,6 @@
   min-height: 40px;
   display: flex;
   border-bottom: 1px solid #ddd;
-
 }
 
 .tfoot.hide {
@@ -81,10 +75,8 @@
   display: none;
 }
 
-
 .tfoot .td {
   border: none;
-
 }
 .th-body .tr:first-child .td {
   border-top: 0;
@@ -111,7 +103,6 @@
   font-weight: bold;
 
   padding-left: 30px;
-
 }
 
 /*  */
@@ -143,7 +134,7 @@
 }
 
 .gird .zenticon-arrow-down {
-	color: #FFFFFF;
+  color: #ffffff;
 }
 
 .td-edit {
@@ -168,6 +159,9 @@
   opacity: 1;
   width: 100%;
   height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .grid-loading.show .loading-bar {
@@ -177,7 +171,7 @@
 
 .loading-bar {
   width: 0px;
-	background-color: #409EFF;
+  background-color: #409eff;
   height: 5px;
 }
 

src/components/gird/main.js

@@ -1,12 +1,10 @@
 import React from 'react'
 import ReactDom from 'react-dom'
 import './main.css'
-import { Icon, Menu, Checkbox, Switch, Sweetalert, Notify } from 'zent'
+import { Icon, Checkbox, Switch, InlineLoading } from 'zent'
 import _ from 'lodash'
 import Pagination from '../pagination/main.js'
 import GridEdit from '../gridEdit/main.js'
-import Input from '../input/main.js'
-import GridCheckBar from '../gridCheckBar/main.js'
 
 //tabbar组件机构{title:"",index:""}
 //props {}
@@ -270,6 +268,7 @@ export default class menu extends React.Component {
       this.setState({ page: nextProps.page })
       this.setState({ page: nextProps.page, emptyText: nextProps.emptyText })
       this.setState({ dataCount: nextProps.dataCount })
+      this.gridPageLoad()
     }
   }
 
@@ -393,13 +392,14 @@ export default class menu extends React.Component {
             })}{' '}
           </div>
 
-          <div
+          <InlineLoading
-            className={
+            loading={this.state.pageLoading}
-              this.state.pageLoading ? 'grid-loading show' : 'grid-loading'
+            iconSize={16}
-            }>
+            textSize={14}
-            <div className='loading-bar'></div>
+            icon='circle'
-            <div className='loading-txt'>数据加载中,请耐心等待</div>
+            className='grid-loading show'
-          </div>
+            iconText='数据加载中,请耐心等待'
+          />
           <div
             className={this.state.pageLoading ? 'th-body hide' : 'th-body'}
             style={{ maxHeight: this.props.maxheight + 'px' }}>