修改gird组件 loading效果
This commit is contained in:
parent
3de1c2fd75
commit
e42f6034de
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
className={
|
||||
this.state.pageLoading ? 'grid-loading show' : 'grid-loading'
|
||||
}>
|
||||
<div className='loading-bar'></div>
|
||||
<div className='loading-txt'>数据加载中,请耐心等待</div>
|
||||
</div>
|
||||
<InlineLoading
|
||||
loading={this.state.pageLoading}
|
||||
iconSize={16}
|
||||
textSize={14}
|
||||
icon='circle'
|
||||
className='grid-loading show'
|
||||
iconText='数据加载中,请耐心等待'
|
||||
/>
|
||||
<div
|
||||
className={this.state.pageLoading ? 'th-body hide' : 'th-body'}
|
||||
style={{ maxHeight: this.props.maxheight + 'px' }}>
|
||||
|
|
Loading…
Reference in New Issue