style: 表格样式问题

zhangyongtian

2024-09-12 f94f841c040c4df517eae11c56885ade1a927fca

 gz-customerSystem/src/components/TableView/index.jsx

@@ -2,17 +2,18 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-10 11:25:15
 * @LastEditTime: 2023-05-08 11:01:18
 * @LastEditors: lwh
 * @LastEditTime: 2024-08-16 10:14:05
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 公共Table封装组件
 */
import React from 'react';
import React, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Space, Table, Tooltip } from 'antd';
import { Space, Tooltip, Table } from 'antd';
import { ReloadOutlined, FolderFilled } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import './index.less';
import { getOffset, getSize } from '@/utils/utility';

const TableView = ({
  showHeader,
@@ -30,6 +31,9 @@
  scroll = null,
  expandable = null,
  rowClassName,
  offsetHeight = 0,//高度偏移量
  tableHeight,//自定义表格高度
  isScroll = false,//表格是否竖向滚动，兼容以前的，当需要表格竖向滚动，请设置这个
  ...other
}) => {
  // 80 ['类型','登记人','调解员','承办法官','调解员','签收人','退回人','处理时限','调解进度/司法确认进度','其他调解员','申请渠道','司法确认结果','助理/书记员','调解类型']
@@ -143,6 +147,31 @@
    myColumns.push(x);
  });

  const scrollRef = useRef(null)
  const [height, setHeight] = useState();//表格高度

  useEffect(() => {
    onWindowResize()
    window.addEventListener("resize", onWindowResize);
    // 返回一个函数，该函数会在组件卸载前执行  
    return () => {
      // 组件销毁时执行  
      window.removeEventListener("resize", onWindowResize);
    };
  }, [])

  const onWindowResize = () => {
    if (tableHeight) {
      setHeight(tableHeight)
    } else {
      let offsetTop = 0;
      if (scrollRef && scrollRef.current) {
        offsetTop = getOffset(scrollRef.current).top;
      }
      setHeight(getSize().windowH - offsetTop - 46 - offsetHeight)
    }
  };

  return (
    <>
      {showHeader && (
@@ -171,30 +200,35 @@
          </div>
        </div>
      )}
      <Table
        columns={myColumns}
        dataSource={dataSource}
        rowClassName={(record, index) => {
          return `${rowClassName && rowClassName(record, index)}`;
        }}
        size={size}
        rowKey={rowKey}
        bordered={bordered}
        rowSelection={rowSelection}
        scroll={scroll}
        expandable={expandable}
        pagination={
          !pagination
            ? false
            : {
              showSizeChanger: true,
              showTotal: (total) => `共${total}条`,
              pageSizeOptions: [10, 20, 30],
              ...pagination,
            }
        }
        {...other}
      />
      <div style={{ height: height + 'px' }} id="table" ref={scrollRef}>
        <Table
          columns={myColumns}
          dataSource={dataSource}
          rowClassName={(record, index) => {
            return `${rowClassName && rowClassName(record, index)}`;
          }}
          size={size}
          rowKey={rowKey}
          bordered={bordered}
          rowSelection={rowSelection}
          scroll={{
            y: isScroll ? height - 80 : null,
            ...scroll
          }}
          expandable={expandable}
          pagination={
            !pagination
              ? false
              : {
                showSizeChanger: true,
                showTotal: (total) => `共${total}条`,
                pageSizeOptions: [10, 20, 30],
                ...pagination,
              }
          }
          {...other}
        />
      </div>
    </>
  );
};