React antd Table 实现单元格点击 表头斜线分组等功能

最新推荐文章于 2024-07-23 09:19:56 发布
最新推荐文章于 2024-07-23 09:19:56 发布
阅读量5.1k 收藏 13
点赞数 4
分类专栏： 工作日常 文章标签： 前端 css react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41718879/article/details/121467952
版权

先上成品示意图:

 几个关键步骤:

一 定义数据结构:

export const data = [
  {
    key: 'row1',
    beforeUpdateLevel: '等级1',
    level_1: '保',
    level_2: '升',
    level_3: '升',
    level_4: '未设置',
    level: 1, // 表示当前行变更前为等级1
  },
  {
    key: 'row2',
    beforeUpdateLevel: '等级2',
    level_1: '降',
    level_2: '保',
    level_3: '升',
    level_4: '升',
    level: 2,
  },
  {
    key: 'row3',
    beforeUpdateLevel: '等级3',
    level_1: '降',
    level_2: '未设置',
    level_3: '未设置',
    level_4: '升',
    level: 3,
  },
  {
    key: 'row4',
    beforeUpdateLevel: '等级4',
    level_1: '降',
    level_2: '未设置',
    level_3: '未设置',
    level_4: '未设置',
    level: 4,
  },
];

二 实现表头分组:

 利用column--->title属性 实现表头对角线分组" data-link-title="antd Table-->column--->title属性 实现表头对角线分组">antd Table-->column--->title属性 实现表头对角线分组


  const columns = [
    // 利用title可以返回ReactNode属性  和 css 实现分组
    {
      title: (
        <div className={styler.headerCell}>
          <div className={styler.afer}>变更后等级</div>
          <div className={styler.before}>变更前等级</div>
        </div>
      ),
      dataIndex: 'beforeUpdateLevel',
      key: 'beforeUpdateLevel',
      // 固定分组这一栏的宽度
      width: 220,
      align: 'center',
    },
    {
      title: '等级1',
      dataIndex: 'level_1',
      align: 'center',
      key: 'level_1',
    },
    {
      title: '等级2',
      dataIndex: 'level_2',
      align: 'center',
      key: 'level_2',
    },
    {
      title: '等级3',
      dataIndex: 'level_3',
      align: 'center',
      key: 'level_3',
    },
    {
      title: '等级4',
      dataIndex: 'level_4',
      align: 'center',
      key: 'level_4',
    },
  ];

 css 实现画对角线:


  .headerCell {
    // 画三角形
    border-top: 43px rgb(250 250 250) solid;
    /*上边框宽度等于表格第一行行高*/
    width: 0px;
    /*让容器宽度为0*/
    height: 0px;
    /*让容器高度为0*/
    border-left: 237px #f8fbff solid;
    /*左边框宽度等于表格第一行第一格宽度*/
    position: relative;
    .afer {
      position: absolute;
      top: -36px;
      left: -70px;
      width: 60px;
      color: #666666;
    }
    .before {
      position: absolute;
      top: -24px;
      left: -226px;
      width: 60px;
      color: #666666;
    }
    // 伪元素画分割线
    &::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 237px;
      top: -140px;
      left: -120px;
      background-color: rgb(239 239 239);
      display: block;
      transform: rotate(-80deg);
    }
  }

 注意:

固定分组表头的宽度,否则响应式可能会引起表头斜线错位等问题

 三:添加单元格点击事件  设置选中状态

利用onCell属性为单元格添加点击事件

 // 设置第一个单元格为默认选中
 const [active, setActive] = useState('row1_level_1');

 const newColums = columns.map((col, index) => {
    return {
      ...col,
      onCell: (record) => ({
        record,
        dataIndex: col.dataIndex,
        title: col.title,
        onClick: () => cellHandleClick(record, col),
      }),
    };
  });


const cellHandleClick = (record, col) => {
    const { key } = record;
    const { dataIndex } = col;
    // 利用record和col的组合key
    setActive(`${key}_${dataIndex}`);
};

 四:完整代码

import React, { useState, useEffect } from 'react';
import { Popover, Table, Tag } from 'antd';
import { data } from './data';
import classNames from 'classnames';
import DownPopover from './DownPopover';
import StayPopover from './StayPopover';
import UpPopover from './UpPopover';
import styler from './index.less';
import { history } from 'umi';

export default function ViewFlow({ onCellClick }) {
  const [active, setActive] = useState('row1_level_1');
  const SettingCell = ({
    title,
    dataIndex,
    children,
    record,
    ...restProps
  }) => {
    let childNode = children;
    const [show, setShow] = useState(false);
    useEffect(() => {}, [show]);

    const handleOver = () => {
      setShow(true);
    };

    const handleOut = () => {
      setShow(false);
    };

    const SettingBtn = (
      <div
        className={styler.settingBtn}
        onClick={() => handleGoSetting(record, dataIndex)}
      >
        去设置
      </div>
    );

    const renderText = (record, dataIndex) => {
      const { level } = record;
      const [_, currentLevel] = dataIndex.split('_');
      const text = record?.[dataIndex];
      switch (text) {
        case '未设置':
          return show ? SettingBtn : <div className={styler.base}>{text}</div>;
        case '保':
          return (
            <Item
              text={text}
              level={level}
              currentLevel={currentLevel}
              color="#3880FF"
              background="rgba(56, 128, 255, 0.05)"
            />
          );
        case '降':
          return (
            <Item
              text={text}
              level={level}
              currentLevel={currentLevel}
              color="#FF3D00"
              background="rgba(255, 61, 0, 0.05)"
            />
          );
        case '升':
          return (
            <Item
              text={text}
              level={level}
              currentLevel={currentLevel}
              color="#24B488"
              background="rgba(36, 180, 136, 0.05)"
            />
          );
        default:
          return text;
      }
    };

    childNode = renderText(record, dataIndex);
    const key = `${record?.key}_${dataIndex}`;
    return (
      <td
        onMouseOut={handleOut}
        onMouseOver={handleOver}
        {...restProps}
        className={classNames(
          { active: key === active },
          { firstColumnClass: dataIndex === 'beforeUpdateLevel' },
        )}
      >
        {childNode}
      </td>
    );
  };
  const ItemMap = {
    升: UpPopover,
    降: DownPopover,
    保: StayPopover,
  };
  const Item = ({ color, background, text, level, currentLevel }) => {
    const Content = ItemMap[text];
    return (
      <Popover
        content={<Content level={level} currentLevel={currentLevel} />}
        placement="bottomRight"
      >
        <div className={styler.text}>
          <div style={{ color, background }}>{text}</div>
        </div>
      </Popover>
    );
  };


  const handleGoSetting = (record, dataIndex) => {
    const { level } = record;
    const [, levelNum] = dataIndex.split('_');
  
  };

  const cellHandleClick = (record, col) => {
    const { key } = record;
    const { dataIndex } = col;
    setActive(`${key}_${dataIndex}`);
  };

  const columns = [
    {
      title: (
        <div className={styler.headerCell}>
          <div className={styler.afer}>变更后等级</div>
          <div className={styler.before}>变更前等级</div>
        </div>
      ),
      dataIndex: 'beforeUpdateLevel',
      key: 'beforeUpdateLevel',
      width: 220,
      align: 'center',
    },
    {
      title: '等级1',
      dataIndex: 'level_1',
      align: 'center',
      key: 'level_1',
    },
    {
      title: '等级2',
      dataIndex: 'level_2',
      align: 'center',
      key: 'level_2',
    },
    {
      title: '等级3',
      dataIndex: 'level_3',
      align: 'center',
      key: 'level_3',
    },
    {
      title: '等级4',
      dataIndex: 'level_4',
      align: 'center',
      key: 'level_4',
    },
  ];
  const newColums = columns.map((col, index) => {
    return {
      ...col,
      onCell: (record) => ({
        record,
        dataIndex: col.dataIndex,
        title: col.title,
        onClick: () => cellHandleClick(record, col),
      }),
    };
  });

  const components = {
    body: {
      cell: SettingCell,
    },
  };

  return (
    <div className={styler.content}>
      <Table
        components={components}
        columns={newColums}
        bordered
        dataSource={data}
        pagination={false}
      />
    </div>
  );
}

data.js

export const data = [
  {
    key: 'row1',
    beforeUpdateLevel: '等级1',
    level_1: '保',
    level_2: '升',
    level_3: '升',
    level_4: '未设置',
    level: 1, // 表示当前行变更前为等级1
  },
  {
    key: 'row2',
    beforeUpdateLevel: '等级2',
    level_1: '降',
    level_2: '保',
    level_3: '升',
    level_4: '升',
    level: 2,
  },
  {
    key: 'row3',
    beforeUpdateLevel: '等级3',
    level_1: '降',
    level_2: '未设置',
    level_3: '未设置',
    level_4: '升',
    level: 3,
  },
  {
    key: 'row4',
    beforeUpdateLevel: '等级4',
    level_1: '降',
    level_2: '未设置',
    level_3: '未设置',
    level_4: '未设置',
    level: 4,
  },
];

index.less

.content {
  .base {
    padding: 5px 0px;
    color: #c8c8c8;
    width: 60px;
    display: inline-block;
  }
  .settingBtn {
    box-sizing: border-box;
    display: inline-block;
    background: rgba(56, 128, 255, 0.1);
    border: 1px solid rgba(56, 128, 255, 0.5);
    padding: 4px;
    width: 60px;
    border-radius: 2px;
    color: #3880ff;
  }
  .text {
    box-sizing: border-box;
    width: 60px;
    padding: 4px 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    div {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(56, 128, 255, 0.05);
    }
  }
  .headerCell {
    // 画三角形
    border-top: 43px rgb(250 250 250) solid;
    /*上边框宽度等于表格第一行行高*/
    width: 0px;
    /*让容器宽度为0*/
    height: 0px;
    /*让容器高度为0*/
    border-left: 237px #f8fbff solid;
    /*左边框宽度等于表格第一行第一格宽度*/
    position: relative;
    .afer {
      position: absolute;
      top: -36px;
      left: -70px;
      width: 60px;
      color: #666666;
    }
    .before {
      position: absolute;
      top: -24px;
      left: -226px;
      width: 60px;
      color: #666666;
    }
    // 伪元素画分割线
    &::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 237px;
      top: -140px;
      left: -120px;
      background-color: rgb(239 239 239);
      display: block;
      transform: rotate(-80deg);
    }
  }

  :global {
    .firstColumnClass {
      background: #f8fbff;
    }
    .active {
      background: linear-gradient(
        0deg,
        rgba(56, 128, 255, 0.05),
        rgba(56, 128, 255, 0.05)
      );
      // border: 1px solid #3880ff;
      // border-right: 1px solid #3880ff !important ;
      // box-sizing: border-box;
      box-shadow: 0px 0px 2px #3880ff inset;
    }
    .ant-table-thead {
      height: 30px;
    }
    .ant-table-tbody > tr > td {
      padding: 8px 0px;
    }
    .ant-table.ant-table-bordered
      > .ant-table-container
      > .ant-table-content
      > table
      > thead
      > tr
      > th {
      padding: 0;
    }
    // .ant-table-tbody > tr > td :first-child {
    //   background: #f8fbff;
    //   &:hover {
    //     background: #f8fbff;
    //   }
    // }background: #f8fbff;
    // .ant-table-tbody > tr > td:nth-child(2) {
    //   background: #bae7ff;
    // }

    .ant-table-tbody > tr > td:hover {
      cursor: pointer;
      background: linear-gradient(
        0deg,
        rgba(56, 128, 255, 0.05),
        rgba(56, 128, 255, 0.05)
      );
    }
  }
}

DownPopver.jsx

import React from 'react';
import { Popover, Space, Tag, Typography } from 'antd';
export default function DownPopover({ level, currentLevel }) {
  return (
    <Space size={10} direction="vertical">
      <Tag color="#FF3D00">降级</Tag>
      <>
        <Typography.Text type="secondary">
          变更前等级：<Typography.Text>等级{`${level}`}</Typography.Text>
        </Typography.Text>
        <Typography.Text type="secondary">
          变更后等级：
          <Typography.Text>等级{`${currentLevel}`}</Typography.Text>
        </Typography.Text>
      </>
    </Space>
  );
}

 StayPopover.jsx

import React from 'react';
import { Popover, Space, Tag, Typography } from 'antd';
export default function StayPopover({ level, currentLevel }) {
  return (
    <Space size={10} direction="vertical">
      <Tag color="#599CFF">保级</Tag>
      <>
        <Typography.Text type="secondary">
          保级等级：<Typography.Text>等级{`${currentLevel}`}</Typography.Text>
        </Typography.Text>
      </>
    </Space>
  );
}

 UpPopover.jsx

import React from 'react';
import { Popover, Space, Tag, Typography } from 'antd';
export default function UpPopover({ level, currentLevel }) {
  return (
    <Space size={10} direction="vertical">
      <Tag color="#24B488">升级</Tag>
      <>
        <Typography.Text type="secondary">
          变更前等级：<Typography.Text>等级{`${level}`}</Typography.Text>
        </Typography.Text>
        <Typography.Text type="secondary">
          变更后等级：
          <Typography.Text>等级{`${currentLevel}`}</Typography.Text>
        </Typography.Text>
        <Typography.Text type="secondary">
          状态：<Typography.Text>启用</Typography.Text>
        </Typography.Text>
      </>
    </Space>
  );
}

 

superTiger_y
关注
专栏目录
Antd给表格一个斜线分隔（通过css改变）
2401_83703797的博客
03-29 826
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取说的一句话，这句话就是『难的不会，会的不难。
和表头对齐 表格_Excel斜线表头制作方法：单线、多线、斜体是如何制作的？
weixin_27012835的博客
01-15 382
在我们日常工作中，用Excel做表格的时候，经常会在表格头部做个斜线表头，它可以很好的给表格数据分类，让我们直观的了解表格数据类型，那么该如何制作呢？今天【Excel与财务】就和大家一起来学习一下制作表头的方法吧，让你深深感受下Excel的神奇魅力，让工作也变得加有趣。如有不明白的可以关注【Excel与财务】私信小编！一、Excel 单斜线表头制作：单斜线表头制作方法较多，这里【Excel与财务】...
绘制斜线表头
weixin_42902260的博客
12-02 190
绘制斜线表头 技巧1：单斜线表头，点击单元格按ctrl+1，选择边框，右下角斜线即可，然后输入文字，ALT+回车换行输入文字，用空格键将文字调整到合适的位置 技巧2：多斜线表头，点击单元格点击插入插图形状选择直线，绘制一根斜线，将颜色调整为黑色，再点击直线，按住ctrl键可以复制一根，将斜线调整到合适的位置，然后输入文字ALT+回车换行输入文字，用空格键将文字调整到合适的位置 ...
antd table rowClassName 行样式不起作用
最新发布
Z_Wonderful的博客
07-23 375
antd table rowClassName 行样式不起作用
React + antd斜线表格
备忘璐的博客
01-17 183
【代码】React + antd斜线表格。
关于antd vue 中table的单元格单击或者双击某个编辑事件，配合customCell的用法，可以编辑某一个单元格。
m0_73008551的博客
03-11 2030
这里通过单元格点击cellEdit事件的单点事件，触发了cellEdit编辑函数，需要双击修改的可以使用onDblclick事件改为双击。首先看数据格式：这里因为是自己加的行，所以设定了一个随机id，大家可以通过index进行设置key也是可以的。editableDataField：为动态编辑的对象，用来获取某一行，由此确定编辑某一个单元格。contentBeingEdited：为自定义声明的string值，用于获取编辑的是哪一列。需求：动态生成一个单元格，点击生成的某一个单元格可以修改他的text值。
Antd给表格一个斜线分隔（通过css改变）(1)
2401_84411018的博客
04-28 541
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-XyKOxVM7-1714253291567)]
vueAntd表格表头斜线分割
橙子味少女风的博客
08-02 802
vue2Ant Design of Vue表格斜线表头
在antd Table中插入可编辑的单元格实例
01-21
补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求： 实现功能说明： 点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据 在...
React+antd实现可编辑单元格，非官网写法，不使用可编辑行和form验证
six66667的博客
09-07 851
antd3以上的写法乍一看还挺复杂，自己写了个精简版。没用EditableRow+Cell的结构，也不使用Context、高阶组件等，不使用form验证。现在这个可编辑单元格组件在鼠标失焦或者回车后，列数据会变回修改前的数据，在state里面加个text，把最后显示的 {children} 换成 {text} 就可以。最后使用的时候直接在column元素的render里面 就好啦， props一定要传处理保存修改的方法。
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是：通过tem
ReactJs编写的带斜线，行和列都分组的表格
03-06
react-spreadsheet:Excel之类的React电子表格组件
05-15
React电子表格 像数据网格组件一样ReactExcel。 演示和文档 提供现场示例。 可文档。 特征 行/列大小调整； 固定行和列； 合并细胞； 自定义单元格； 虚拟化 造型风格 要获得基本样式，可以导入默认样式： import '@vadim-sartakov/react-spreadsheet/styles.css' ; 还可以提供自定义样式。 默认情况下，电子表格具有以下样式类： 班级 描述 电子表格 根类 细胞 一般细胞 标题单元 标题单元格。 行号，列号 价值单元 价值单元
react-react自定义搜索组件主要针对于reactantd表头搜索基于antd进行封装
08-14
针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
AntD表单Table单元格合并、样式处理
莉兹Liz的博客
03-04 5371
Table表单处理 1、改变Table表单内表头颜色、粗细 2、改变表体颜色 3、合并横行、竖行单元格 4、金额处理，大于0显示红色，小于0显示绿色 5、改变合计行背景色 代码 /** * Table表单样式处理 */ import React, { Component } from 'react'; import { Table } from 'antd'; import './index.css'; import * as util from '../../assets/js/utils.js';
Antd 表格设置表头分组实现可编辑行
vv110x的博客
07-01 1281
主要通过 onCell 方法修改 children 中 cloumn 的属性。
用ReactJs编写的带斜线，行和列都分组的表格
wp12345666666的博客
03-06 2020
NewUserTrackTable.js文件 /** * Created by Administrator on 2017/3/3 0003. */ import React, {Component} from "react" import "./NewUserTrackTable.less" var g_index = -1; export default class NewUserTra
react antd 中table使用rowClassName实现行样式添加背景色
06-08
在 React Ant Design 中，使用 `rowClassName` 属性可以为表格的每一行添加样式。具体实现方法如下： 1. 首先，在表格组件中设置 `rowClassName` 属性，值为一个回调函数。 2. 回调函数接收一个参数，即当前行的数据对象，可以根据这个数据对象来判断应该为当前行添加哪些样式。 3. 在回调函数中返回一个字符串，字符串即为添加给当前行的样式类名。 下面是一个简单的例子： ```jsx import React from 'react'; import { Table } from 'antd'; const dataSource = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const rowClassName = (record, index) => { if (index % 2 === 0) { return 'even-row'; } else { return 'odd-row'; } }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const App = () => { return <Table dataSource={dataSource} columns={columns} rowClassName={rowClassName} />; }; export default App; ``` 在上面的例子中，我们定义了一个回调函数 `rowClassName`，该函数接收两个参数：`record` 表示当前行的数据对象，`index` 表示当前行的索引。在该函数中，我们判断当前行的索引是否为偶数，如果是偶数，就返回样式类名 `even-row`，否则返回样式类名 `odd-row`。最后将该函数作为 `rowClassName` 属性传递给 `Table` 组件，即可实现为表格的每一行添加背景色的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

superTiger_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值