From e42f6034dee92da208df1d8993f5ca1ea8660c4a Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Tue, 23 Aug 2022 18:21:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9gird=E7=BB=84=E4=BB=B6=20load?= =?UTF-8?q?ing=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/gird/main.css | 196 +++++++++++++++++------------------ src/components/gird/main.js | 24 ++--- 2 files changed, 107 insertions(+), 113 deletions(-) diff --git a/src/components/gird/main.css b/src/components/gird/main.css index 70c4a740..ee692c37 100644 --- a/src/components/gird/main.css +++ b/src/components/gird/main.css @@ -1,195 +1,189 @@ .gird { - height: auto; - max-width: 100%; - overflow-y: hidden; - overflow-x: auto; + height: auto; + max-width: 100%; + overflow-y: hidden; + overflow-x: auto; } .th-head { - height: 48px; - display: inline-flex; - min-width: 100%; - border-bottom: 1px solid #ddd; + height: 48px; + display: inline-flex; + min-width: 100%; + border-bottom: 1px solid #ddd; } .th-td { - height: 48px; - line-height: 48px; - padding-left: 20px; - padding-right: 20px; - color: #626366; - font-size: 12px; - display: inline-flex; + height: 48px; + line-height: 48px; + padding-left: 20px; + padding-right: 20px; + color: #626366; + font-size: 12px; + display: inline-flex; } .th-body { - /* width: 100%; */ - min-width: 100%; + /* width: 100%; */ + min-width: 100%; - overflow-y: auto; - border-bottom: 1px solid #dfe1e6; - border-top: none; - float: left; + overflow-y: auto; + border-bottom: 1px solid #dfe1e6; + border-top: none; + float: left; } .th-body.hide { - display: none; + display: none; } - .empty-text { - width: 100%; - text-align: center; - padding: 28px 0; - color: rgba(0, 0, 0, .6); - font-size: 12px; - + width: 100%; + text-align: center; + padding: 28px 0; + color: rgba(0, 0, 0, 0.6); + font-size: 12px; } .th-tr { - /* width: 100%; */ - height: auto; - min-height: 40px; - display: flex; - + /* width: 100%; */ + height: auto; + min-height: 40px; + display: flex; } .tr { - /* width: 100%; */ - height: auto; - min-height: 40px; - display: flex; + /* width: 100%; */ + height: auto; + min-height: 40px; + display: flex; } -.tr.active{ - - background-color: #ebf2f7 !important; - +.tr.active { + background-color: #ebf2f7 !important; } .tfoot { - width: 100%; - height: auto; - min-height: 40px; - display: flex; - border-bottom: 1px solid #ddd; - + width: 100%; + height: auto; + min-height: 40px; + display: flex; + border-bottom: 1px solid #ddd; } .tfoot.hide { - /* visibility: hidden; */ - display: none; + /* visibility: hidden; */ + display: none; } - .tfoot .td { - border: none; - + border: none; } -.th-body .tr:first-child .td{ - border-top: 0; +.th-body .tr:first-child .td { + border-top: 0; } .td { - display: flex; - min-height: 40px; - padding-left: 20px; - padding-right: 20px; - align-items: center; - font-size: 12px; - border-top: 1px solid #ddd; - display: inline-flex; - word-break:break-all; - padding-top: 3px; - padding-bottom: 3px; + display: flex; + min-height: 40px; + padding-left: 20px; + padding-right: 20px; + align-items: center; + font-size: 12px; + border-top: 1px solid #ddd; + display: inline-flex; + word-break: break-all; + padding-top: 3px; + padding-bottom: 3px; } .th-td-total { - display: flex; - min-height: 40px; - align-items: center; - font-size: 12px; - font-weight: bold; - - padding-left: 30px; + display: flex; + min-height: 40px; + align-items: center; + font-size: 12px; + font-weight: bold; + padding-left: 30px; } /* */ .zent-switch-checked { - background-color: #296bef !important; + background-color: #296bef !important; } .zent-switch-checked:hover { - background-color: #125bed !important; + background-color: #125bed !important; } .grid-link { - font-size: 12px; - color: #296bef; - padding-right: 10px; - cursor: pointer; + font-size: 12px; + color: #296bef; + padding-right: 10px; + cursor: pointer; } .grid-link:hover { - color: #125bed; + color: #125bed; } .td.total { - font-weight: bold; + font-weight: bold; } .gird .th-td:hover .zenticon-arrow-down { - color: #626366; + color: #626366; } .gird .zenticon-arrow-down { - color: #FFFFFF; + color: #ffffff; } .td-edit { - color: transparent; + color: transparent; } .td:hover .td-edit { - color: #313233; + color: #313233; } .td-confirm { - width: 300px !important; + width: 300px !important; } .grid-loading { - width: 0px; - height: 0; - opacity: 0; + width: 0px; + height: 0; + opacity: 0; } .grid-loading.show { - opacity: 1; - width: 100%; - height: 100px; + opacity: 1; + width: 100%; + height: 100px; + display: flex; + align-items: center; + justify-content: center; } .grid-loading.show .loading-bar { - width: 100%; - transition: width 0.5s; + width: 100%; + transition: width 0.5s; } .loading-bar { - width: 0px; - background-color: #409EFF; - height: 5px; + width: 0px; + background-color: #409eff; + height: 5px; } .loading-txt { - margin-top: 10px; - text-align: center; + margin-top: 10px; + text-align: center; } .pagebar { - visibility: visible; + visibility: visible; } .pagebar.hide { - visibility: hidden; + visibility: hidden; } diff --git a/src/components/gird/main.js b/src/components/gird/main.js index 86e7af24..48a46365 100644 --- a/src/components/gird/main.js +++ b/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 {} @@ -176,9 +174,9 @@ export default class menu extends React.Component { this.setState({ allChecked: e.target.checked }) - + 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({ 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, emptyText: nextProps.emptyText }) this.setState({ dataCount: nextProps.dataCount }) + this.gridPageLoad() } } @@ -393,13 +392,14 @@ export default class menu extends React.Component { })}{' '} -
-
-
数据加载中,请耐心等待
-
+