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

news2024/12/23 6:59:19

实现效果在这里插入图片描述

在这里插入图片描述

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 powerList = JSON.parse(localStorage.getItem('powerList')); //可展示的列表权限
  const isShow = powerList.includes(props.auth);
  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]);

  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={isShow ? dataSource : null}
        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
        auth="/psychologyReservationDate/pageList"
        className="list"
        columns={columns}
        dataSource={roleList}
        scroll={{
          x: 1600,
        }}
        total={listTotal}
        size={listSize}
        defaultCurrent={current}
        paginationChange={paginationChange}
      />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/661625.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【方法】Excel表格的“打开密码”不想要了,如何取消?

对于重要的Excel表格&#xff0c;很多小伙伴都会设置“打开密码”&#xff0c;这样就无法随意打开表格&#xff0c;只有输入正确的密码才可以打开。 如果后续表格不再需要保护&#xff0c;每次打开都要输一次密码&#xff0c;这样操作也是很麻烦。 那不想要“打开密码”&…

(5)(5.8) 保存微调和自动微调

文章目录 前言 1 保存微调 2 自动微调 3 保存微调和自动微调的视频演示 4 桌面方法 前言 当然&#xff0c;风对你的旋翼飞机有很大的影响&#xff0c;会把它推来推去。然而&#xff0c;你可能也会发现&#xff0c;在自稳模式下飞行时&#xff0c;即使在无风的环境中&#xff0…

chatgpt赋能python:Python重新编辑引擎优化(SEO)文章

Python重新编辑引擎优化(SEO)文章 介绍 Python是一种多用途的高级编程语言&#xff0c;用于开发网络应用程序&#xff0c;算法&#xff0c;科学计算和数据分析等。 随着越来越多的网站和应用程序采用Python编写&#xff0c;优化Python代码以提高搜索引擎优化(SEO)变得越来越重…

基于html+css的图展示133

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

科技孵化制造蝶变:国际智造节上,群硕获评2023杰出数字化创新企业

论起2023年的热点有哪些&#xff1f;由ChatGPT掀起的智能科技浪潮&#xff0c;绝对是逃不开的话题。 6月16日&#xff0c;以“科技驱动&#xff0c;智造未来”为主题的2023国际智造节&#xff0c;在北京隆重举行。通过此次活动&#xff0c;在数字化领域深耕二十年的群硕软件&a…

K8s Kubectl 技巧集锦

kubectl 是 Kubernetes 的一个命令行管理工具&#xff0c;可用于 Kubernetes 上的应用部署和日常管理。本文列举了 9 个常见的 kubectl 命令&#xff0c;并总结了一些使用技巧&#xff0c;希望可以帮助系统管理员简化管理工作。 一、使用 Kubectl 查询、创建、编辑和删除资源 …

【C数据结构】循环队列_CyclicQueue

目录 循环队列_CyclicQueue 【1】循环队列 【1.1】循环队列的各个接口 【1.2】循环队列初始化 【1.3】循环队列初销毁 【1.4】循环队列插入 【1.5】循环队列删除 【1.6】循环队列获取头位置数据 【1.7】循环队列获取尾位置数据 【1.8】循环队列判满 【1.9】循环队列…

MMOE(Multi-gate Mixture-of-Experts)

1.前提和动机 随着推荐技术的发展&#xff0c;目前越来越多的推荐场景&#xff0c;往往并不是单独的优化一个指标&#xff0c;比如&#xff1a; 视频推荐领域&#xff1a;推荐排序任务不仅需要考虑到用户点击率、完播率&#xff0c;也需要考虑到一些满意度指标&#xff0c;例如…

优秀java实习报告范文5篇

优秀java实习报告范文(一) 一:实习介绍 1)实习题目 学生信息管理系统的设计与开发 2)实习目的 《Java程序设计》课程是电子商务专业的一门专业必修课程&#xff0c;特针对此课程进行为期三周的实践教学&#xff0c;旨在提升本专业学生对此课程中的理论知识的综合应用能力、提高…

微信研发体系下的分布式配置系统设计实践

腾小云导读 对很多的开发者而言&#xff0c;处理运营素材反复变更等需求场景不是一件轻松的事。开发者通常需要定制化地进行数据清理、格式转换和工具开发等等。在这个时候&#xff0c;建设分布式配置系统就显得尤为重要。本文旨在分析分布式配置系统的必要性、可行性及其关键…

SpringBoot的日志

SpringBoot的日志 &#x1f50e;日志是什么&#x1f50e;日志的作用&#x1f50e;日志级别日志级别的作用日志级别的分类日志级别的设置 &#x1f50e;打印日志打印日志具体内容划分 &#x1f50e;常用的日志框架为什么这样设计对比System.out.ptintln()与日志框架 &#x1f50…

Kubernetes那点事儿——暴露服务之Ingress

Kubernetes那点事儿——暴露服务之Ingress 前言一、ingress负载均衡器Ingress Controller路由规则Ingress 二、Ingress Controller三、案例 前言 在 k8s 集群中&#xff0c;如果我们将服务暴露出来&#xff0c;提供访问&#xff0c;可以使用Nodeport方式&#xff0c;但是Nodepo…

SIG Mesh协议学习

1. 简介 Bluetooth SIG组织在2017年7月17日发布了蓝牙Mesh标准. 蓝牙Mesh不同于传统Bluetooth Low Energy(BLE)协议的1对1, 1对多的通信方式, 它实现了多对多的通信. 这使得mesh网络中的各个节点之间可以相互通信. 蓝牙Mesh协议建立在BLE的物理层和链路层之上, 也就是说它可以…

MachXO2系列 FPGA LCMXO2-7000HC-4TG144C-可编程逻辑器件介绍

莱迪思深力科MachXO2系列LCMXO2-7000HC-4TG144C是高度可配置的串行逻辑器件&#xff08;PLD&#xff09;&#xff0c;具有低误差&#xff0c;具有和高系统集成等特性。MachXO2系列逻辑密度增加了3倍&#xff0c;嵌入存储增加了10倍&#xff0c;静态降低100倍&#xff0c;而成本…

动态获取项目根目录的两种方式

说明&#xff1a;如果项目上传的文件是存储在本地的&#xff0c;为了项目可以在其他电脑上也可能正常运行&#xff0c;可以将文件上传至项目的static文件夹里&#xff0c;并将文件路径保存至数据库中&#xff0c;前端显示时使用也可以通过该路径访问。要想获取到本地项目static…

如何评估大型语言模型(LLM)?

编者按&#xff1a;近期几乎每隔一段时间&#xff0c;就有新的大语言模型发布&#xff0c;但是当下仍然没有一个通用的标准来评估这些大型语言模型的质量&#xff0c;我们急需一个可靠的、综合的LLM评估框架。 本文说明了为什么我们需要一个全面的大模型评估框架&#xff0c;并…

DOCker安装(一)

DOCker的安装 1、简介 Docker使用客户端-服务器(C/S)架构模式&#xff0c;使用远程API来管理和创建Docker容器。 Docker容器通过Docker镜像来创建。 容器之间互不干扰 容器与镜像的关系类似于面向对象编程中的对象与类。 对象->容器 镜像->类 通过镜像来创建容器 …

如何用MarkDown轻松排版和格式化文档?

前言 大家好哦&#xff01;我写作用的语言是MarkDown&#xff0c;真的非常好用&#xff0c;在本文中我将一字字的教你如何使用这个轻量化&#xff0c;容易上手的轻标记语言。 1. 什么是MarkDown MarkDown是一种轻量级的标记语言&#xff0c;它可以在文本中通过简单的标记实现…

基于Java+SpringBoot+Vue+uniapp微信小程序实现仓储管理系统

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

OpenHarmony端云一体化应用开发快速入门练习(上)基础配置

一 、整体说明 SDK版本更新说明 二、开发流程 集成SDK &#xff08;一&#xff09;前提条件 安装HUAWEI DevEco Studio 3.1及以上版本&#xff0c;配置 SDK API Version 9及以上&#xff0c;Compile SDK Version 9及以上&#xff0c;Compatible SDK Version 9及以上。 &#…