封装table表格组件加载效果

src/components/gird/main.js

@@ -135,7 +135,7 @@ export default class menu extends React.Component {
       indeterminate: false,
       pageNum: 0,
       pageCount: props.dataCount,
-      pageLoading: false,
+      pageLoading: true,
       editShow: false,
       postion: null,
       historyrow_id: null,
@@ -160,7 +160,6 @@ export default class menu extends React.Component {
     }
     //Safari与Chrome属于同一类型
     dom.onmousewheel = this.scrollFunc
-    this.gridPageLoad()
   }
 
   //多选
@@ -265,12 +264,11 @@ export default class menu extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.state.tableData != nextProps.tableData) {
-      this.setState({ tableData: nextProps.tableData })
+      this.setState({ tableData: nextProps.tableData ,pageLoading:false})
       this.setState({ page: nextProps.page })
       this.setState({ page: nextProps.page, emptyText: nextProps.emptyText })
       this.setState({ dataCount: nextProps.dataCount })
       this.scrollPosition()
-      this.gridPageLoad()
     }
   }
 
@@ -307,13 +305,8 @@ export default class menu extends React.Component {
     this.props.countChange(e)
     this.setState({ pageCount: e })
   }
-  gridPageLoad() {
-    if (!this.state.pageLoading) {
-      this.setState({ pageLoading: true })
-      setTimeout(() => {
-        this.setState({ pageLoading: false })
-      }, 800)
-    }
+  gridPageLoad(flag) {
+      this.setState({ pageLoading: flag })
   }
   pageShow(e) {}
   gridEditChange(e) {}

src/pages/plan/keyList/index.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef,useEffect } from 'react'
 import { useUpdateEffect, useSetState } from 'ahooks'
 
 import { getNowTime } from '@/utils.js'
@@ -188,6 +188,7 @@ const UseKeyList = () => {
    * 获取表格
    */
   const getTable = () => {
+    plan_list_el.current.gridPageLoad(true);
     const param = getParam()
     getKeysList(param).then((res) => {
       handelResponse(
@@ -212,6 +213,12 @@ const UseKeyList = () => {
     getTable()
   }, [state.isQuery])
 
+  useEffect(()=>{
+    plan_list_el.current.gridPageLoad(false);
+    return ()=>{//在函数组件卸载前执行
+      
+    }
+    }, []);
   /**
    * 获取查询值
    */
@@ -252,6 +259,7 @@ const UseKeyList = () => {
    */
   const clearSelectTableBtn = () => {
     plan_list_el.current.allChecked(false)
+    plan_list_el.current.gridPageLoad(false);
     setState({ selectTable: [] })
   }