标签：rowSpan name pageSize 数据 单元格 server React AntDesign data

项目场景：

老板要求有相同数据时，那一列就需要合并起来，还能怎么办，硬着 ‘头’ 去实现吧

问题描述：

看了 Ant design官方文档 的旁友可以了解到 单元格 有一个属性 rowSpan， 它的value是数字，数字越大，渲染占据的行数越多，为0时那一个单元格不会渲染，可以看看下方这个不严谨的图

由于本人有点菜鸡，所以动态合并的方法是参考了其他兄弟弄出来的，但是后面发现了个问题，他们的解决方法在有翻页的情况会出现BUG，或者是他们接收到后台的数据跟我的不一样，所以才有了这篇文章

最开始的方法是通过跟接收到的数据直接进行匹配，然后再对rowSpan进行设置

state = {
    data: [], // 表格数据
  };
 columns = [
    {
      title: '服务器',
      dataIndex: 'server_name',
      render: (value, record, index) => {
        // 处理列，相同数据则合并
        const { data } = this.state;

        // 处理rowSpan
        const obj = {
          children: value,
          props: { rowSpan: 1 },
        };
        
        // 当检索到相同数据则返回 那条数据
        let arr = data.filter((res) => {
          return res.server_name == record.server_name;
        });
        if (index == 0 || data[index - 1].server_name != record.server_name) {
          // 匹配到相同数据的长度
          obj.props.rowSpan = arr.length;
        } else {
          // 如果上一行的数据与当前的数据相同，就将rowSpan变为0
          obj.props.rowSpan = 0;
        }
        return obj;
      },
    },
 ]

原因分析：

1. 当有大量数据时，我们需要对表格做分页处理，减少页面渲染占用以及方便用户浏览
2. 小伙伴可以仔细看看，state 中的 data，这个是保存接收到的数据，再来看看下面的这串代码

/**
  * 这串代码没有考虑到分页的情况，一页有20条数据，第一页是显示[0,20]的数据
  * 第二页是显示[21,40]的数据，下面这串代码没有处理这种结果，那就会出现第二页的时候匹配[0,40]的数据
  * 结果就会出现表格列错位的情况，这肯定不是我们要的
  */ 
let arr = data.filter((res) => {
   return res.server_name == record.server_name;
});

解决方案：

考虑到有分页的话，我是将分页的数据给用上，获取分页当前的页数，以及每页总共有多少条数据，然后对 data 进行截取，第一页我就截取[0,20]的数据，第二页时我就截取[21,40]的数据，这样的话就不会出现切换分页表格列错位的情况，代码的话提供个大概

state = {
    data: [], // 表格数据
    page: 1, // 当前页
    pageSize: 20, // 页数据条数
  };
  
columns = [
    {
      title: '服务器',
      dataIndex: 'server_name',
      render: (value, record, index) => {
        // 处理列，相同数据则合并
        const { data, page, pageSize } = this.state;
        
        // 截取当前页的数据(主要就这一段)
        const start = page * pageSize - pageSize;
        const end = data.length > pageSize * page ? data.length - 1 : pageSize * page;
        // 截取后的数据
        const dealData = data.slice(start, end);

        // 处理rowSpan
        const obj = {
          children: value,
          props: { rowSpan: 1 },
        };
        // 当检索到相同数据则返回
        let arr = dealData.filter((res) => {
          return res.server_name == record.server_name;
        });
        if (index == 0 || dealData[index - 1].server_name != record.server_name) {
          obj.props.rowSpan = arr.length;
        } else {
          obj.props.rowSpan = 0;
        }
        return obj;
      },
    },
]

render() {
	return (
	<table
	    columns={this.columns}
	    pagination={{
	      pageSizeOptions: ['20', '50', '100', '200', '500'],
	      // 当页数或单页总条数改变时，就更新一下state
	      onChange: (page, pageSize) => this.setState({ page, pageSize }),
	      ),
	    }}
	  />)
}

总结

写得可能会有点乱不好意思哈，也只是做个记录，让自己能记得，也给后面遇到的兄弟提供一点思路，对这段代码有优化建议的兄弟也提出来一起学习哈

标签：rowSpan,name,pageSize,数据,单元格,server,React,AntDesign,data
来源： https://blog.csdn.net/Gentman_Dylan/article/details/121233433

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。