react+antd实现表格封装，可动态控制列显示隐藏。

跳跳的小古风

已于 2023-10-12 15:32:21 修改

阅读量1.4k

点赞数 3

分类专栏： react 文章标签： react.js 前端前端框架

于 2023-06-19 09:54:49 首次发布

本文链接：https://blog.csdn.net/weixin_43787651/article/details/131281419

版权

react 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章介绍了如何使用React和Antd库封装一个表格组件，该组件支持动态控制列的显示和隐藏，包括全选列的功能。提供了代码示例和Gitee仓库链接，便于读者理解和复用。此外，还涉及了npm安装和组件的使用方式。

摘要由CSDN通过智能技术生成

升级版本

升级表格封装，把请求犯法都加进去了，后续无脑开发！！！

实现效果

在这里插入图片描述

git地址

https://gitee.com/jumping-little-stars/dynamic-colums-table.git

https://gitee.com/jumping-little-stars/dynamic-colums-table

npm 安装

cnpm i dynamic-tablelist-colums

代码讲解

import { Table, Pagination, Button, Dropdown, Checkbox, message } from 'antd';
import { useState, useEffect } from 'react';
import { PicRightOutlined } from '@ant-design/icons';

import './index.less';

const TableComponent = (props) => {
  const [open, setOpen] = useState(false); //动态控制列的下拉显隐
  const [items, setItems] = useState([]);//当前的下拉选择状态

  // 表格列表
  const [columns, setColumns] = useState(
    props.columns.map((item) => {
      return {
        ...item,
        align: 'center',
        ellipsis: {
          showTitle: false,
        },
      };
    }),
  );

  //控制列的初始值
  const [starCol, setStarCol] = useState(
    props.columns.map((item) => {
      return {
        ...item,
        check: true,
        align: 'center',
        ellipsis: {
          showTitle: false,
        },
      };
    }),
  );

  useEffect(() => {
    changItem(starCol);
  }, [props]);

//动态传入列时，更新
  useEffect(() => {
    if (props.columns || props.columns.length > 0) {
      setColumns(
        props.columns.map((item) => {
          return {
            ...item,
            align: 'center',
            ellipsis: {
              showTitle: false,
            },
          };
        }),
      );
      setStarCol(
        props.columns.map((item) => {
          return {
            ...item,
            check: true,
            align: 'center',
            ellipsis: {
              showTitle: false,
            },
          };
        }),
      );
    }
  }, [props.columns]);

  const serialNumber = (pageIndex, pageSize, index) => {
    return (pageIndex - 1) * pageSize + index;
  };

  // 控制显示列的操作
  const onClick = ({ key }) => {
    if (key == 'all') {
      const newDrop = starCol;
      newDrop.map((o, index) => {
        o.check = true;
      });
      changItem(starCol);
      setColumns(
        props.columns.map((item) => {
          return {
            ...item,
            check: true,
            align: 'center',
            ellipsis: {
              showTitle: false,
            },
          };
        }),
      );
    } else {
      const newDrop = starCol;
      newDrop.map((o, index) => {
        if (index == key) {
          o.check = !o.check;
        }
      });
      let newColumns = newDrop.filter((o) => o.check);
      if (newColumns.length == 0) {
        message.warning('请至少选择一列');
      } else {
        setStarCol(newDrop);
        changItem(newDrop);
        setColumns(newColumns); //列状态
      }
    }
  };

  // 列的选中状态改变
  const changItem = (data) => {
    let opitems = data.map((item, index) => {
      return {
        key: index,
        label: <Checkbox checked={item.check}>{item.title}</Checkbox>,
      };
    });
    opitems.unshift(
      {
        key: 'all',
        label: <Button>{'全选列'}</Button>,
      },
      {
        type: 'divider',
      },
    );
    setItems(opitems); //当前的下拉状态
  };
  // 控制分页索引对应的数据源
  const dataSource = props.dataSource?.map((item, index) => {
    return {
      index: serialNumber(props.defaultCurrent, props.size, index + 1),
      ...item,
    };
  });

  return (
    <div className="table">
      <Dropdown
        menu={{
          items,
          onClick,
        }}
        overlayClassName="drop"
        trigger={['click']}
        onOpenChange={() => setOpen(!open)}
        open={open}
        arrow
        placement="bottomRight"
      >
        <a onClick={(e) => e.preventDefault()}>
          <Button icon={<PicRightOutlined />} title="显示/隐藏列"></Button>
        </a>
      </Dropdown>
      <Table
        bordered
        columns={columns}
        rowSelection={props?.rowSelection}
        dataSource={dataSource}
        rowKey={(item) => item.id}
        pagination={false}
        className="insiadeTable"
        scroll={{
          y: 450,
          ...props?.scroll,
        }}
        onRow={props?.onRow}
        rowClassName={props?.rowClassName}
        summary={props?.summary}
      />
      <div className="pagination">
        {props.total ? (
          <Pagination
            showQuickJumper
            defaultCurrent={props.defaultCurrent}
            total={props.total}
            showTotal={(total) => `共 ${total} 条`}
            size={props.size}
            onChange={props.paginationChange}
            pageSizeOptions={[10, 50, 100, 500]}
          />
        ) : (
          ''
        )}
      </div>
    </div>
  );
};

export default TableComponent;

页面使用

 <TableComponent
        className="list"
        columns={columns}
        dataSource={roleList}
        scroll={{
          x: 1600,
        }}
        total={listTotal}
        size={listSize}
        defaultCurrent={current}
        paginationChange={paginationChange}
      />