Commit 156a4d08 authored by 周宏民's avatar 周宏民

pref: table组件去掉空状态

parent eef8d600
import React, { useContext, useState, useEffect } from 'react'; import { ConfigProvider, Table } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Table, ConfigProvider } from 'antd'; import React, { useContext, useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable'; import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css'; import 'react-resizable/css/styles.css';
import './index.less'; import './index.less';
...@@ -26,12 +26,12 @@ const ResizeableTitle = (props) => { ...@@ -26,12 +26,12 @@ const ResizeableTitle = (props) => {
}; };
const BasicTable = (props) => { const BasicTable = (props) => {
const tableRef = useRef(null);
const [cols, setCols] = useState(props.columns); const [cols, setCols] = useState(props.columns);
const [columns, setColumns] = useState(props.columns); const [columns, setColumns] = useState(props.columns);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('basic-table'); const prefixCls = getPrefixCls('basic-table');
const pagination = typeof props.pagination !== 'undefined' ? props.pagination : {}; const pagination = typeof props.pagination !== 'undefined' ? props.pagination : {};
const showTotal = (total) => { const showTotal = (total) => {
return `共 ${Math.ceil( return `共 ${Math.ceil(
total / (props.pagination ? props.pagination.pageSize || 10 : 10), total / (props.pagination ? props.pagination.pageSize || 10 : 10),
...@@ -74,20 +74,28 @@ const BasicTable = (props) => { ...@@ -74,20 +74,28 @@ const BasicTable = (props) => {
); );
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [cols]); }, [cols]);
const renderEmpty = () => {
let height = tableRef.current?.clientHeight;
// 表格高度减 表头 减padding
height = height ? (props.showHeader === false ? height - 15 - 32 : height - 60 - 32) : 200;
return <div style={{ height: height }} />;
};
useEffect(() => { useEffect(() => {
setCols(props.columns); setCols(props.columns);
}, [props.columns]); }, [props.columns]);
return ( return (
<Table <ConfigProvider renderEmpty={renderEmpty}>
className={classNames(prefixCls)} <Table
scroll={{ y: 'calc(100% - 40px)' }} ref={tableRef}
components={components} className={classNames(prefixCls)}
{...props} scroll={{ y: 'calc(100% - 40px)' }}
columns={columns} components={components}
pagination={pagination ? { showTotal, ...pagination } : pagination} {...props}
/> columns={columns}
pagination={pagination ? { showTotal, ...pagination } : pagination}
/>
</ConfigProvider>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment