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

View File

@ -1,12 +1,10 @@
import React from 'react' import React from 'react'
import ReactDom from 'react-dom' import ReactDom from 'react-dom'
import './main.css' import './main.css'
import { Icon, Menu, Checkbox, Switch, Sweetalert, Notify } from 'zent' import { Icon, Checkbox, Switch, InlineLoading } from 'zent'
import _ from 'lodash' import _ from 'lodash'
import Pagination from '../pagination/main.js' import Pagination from '../pagination/main.js'
import GridEdit from '../gridEdit/main.js' import GridEdit from '../gridEdit/main.js'
import Input from '../input/main.js'
import GridCheckBar from '../gridCheckBar/main.js'
//tabbar组件机构{title:"",index:""} //tabbar组件机构{title:"",index:""}
//props {} //props {}
@ -178,7 +176,7 @@ export default class menu extends React.Component {
}) })
let tableData = _.map(this.state.tableData, (item) => { let tableData = _.map(this.state.tableData, (item) => {
return (item.checked = e.target.checked&&!item.disabled) return (item.checked = e.target.checked && !item.disabled)
}) })
this.setState({ this.setState({
tableData: this.state.tableData tableData: this.state.tableData
@ -270,6 +268,7 @@ export default class menu extends React.Component {
this.setState({ page: nextProps.page }) this.setState({ page: nextProps.page })
this.setState({ page: nextProps.page, emptyText: nextProps.emptyText }) this.setState({ page: nextProps.page, emptyText: nextProps.emptyText })
this.setState({ dataCount: nextProps.dataCount }) this.setState({ dataCount: nextProps.dataCount })
this.gridPageLoad()
} }
} }
@ -393,13 +392,14 @@ export default class menu extends React.Component {
})}{' '} })}{' '}
</div> </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 <div
className={this.state.pageLoading ? 'th-body hide' : 'th-body'} className={this.state.pageLoading ? 'th-body hide' : 'th-body'}
style={{ maxHeight: this.props.maxheight + 'px' }}> style={{ maxHeight: this.props.maxheight + 'px' }}>