修改gird组件 loading效果

This commit is contained in:
wangsongsole 2022-08-23 18:21:38 +08:00
parent 3de1c2fd75
commit e42f6034de
2 changed files with 107 additions and 113 deletions

View File

@ -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;
}

View File

@ -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' }}>