【antd】table数据跟着行走，且实现列的展示

最新推荐文章于 2024-09-25 10:21:30 发布

lchcy

最新推荐文章于 2024-09-25 10:21:30 发布

阅读量288

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/weixin_47454566/article/details/130771664

版权

文章描述了一个React应用中处理表格数据的场景。通过对bData的计算，根据a数据过滤并关联id，当行内数据有重复时显示【！】，无重复显示【】，存在数据则显示【√】。实现中使用了数组的filter和includes方法以及条件渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求 b是table数据，要使a对应显示在table中，如果一行有重复数据则显示【！】，若行数据没有则为【】，若有数据显示【√】

在这里插入图片描述

此时黑色框中的√应该是【！】

在这里插入图片描述

实现

 const bData = useMemo(() => {
    const list = b;
    list?.forEach(item => {
      item.idNameList = a?.filter(element => element.idList.includes(item.id)).map(element => element.name) || [];
    });
    return list;
  }, [a, b]);

//table中的render
  render: (_: any, record: any) => {
            const len = record.idNameList && record.idNameList.length;
            if ((record.children && record.children.length > 0)) return <></>;
            if (!record.idNameList.includes(item.name)) return <></>;
            return (<div style={{textAlign: "center"}}>
              {
                len >= 2 ?
                  <ExclamationCircleFilled style={{color: "#F5222D"}}/> :
                  <CheckCircleFilled style={{color: "#52C41A"}}/>
              }
            </div>);
          }