React 实现Table表格数据的列合并

本文内容参考And Design 具体API内容请参考 Ant Design
此部分内容为个人学习记录专用：

表头只支持列合并，使用 column 里的 colSpan 进行设置。
表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
这句话 是来自And Design Table中关于表格行/列合并 内容。

废话先不说 先上效果图：

我们想实现的内容 是对数据的列进行合并，因为有很多数据都是相同的 比如说我效果图中的省份，直属台等信息。
在查找Antd API与效果图中我们知道，要想实现这样的效果，我们需要对Table表头进行处理，rowSpan（对应行 主要 处理使用） **colSpan（对应列） **
后端返回的数据是我们使用的常规数据 我们主要是在前端进行处理
先看下我们表头

columns = [
            {
                title: '直属台',
                dataIndex: 'ZHISHUTAI',
                key: 'ZHISHUTAI',
                render: (text, row, index) => {
                    return {
                        children: text,
                        props: {
                            rowSpan: row['ZHISHUTAI&rowSpan'],
                        }
                    }
                },
            }, 

这里 我们要知道 rowSpan的作用是告诉Table中表格数据那些行合并
rowSpan中对应的是我们行的数据 如rowSpan:5 就代表5行进行合并 而0 表示不渲染（具体可看Antd 中文官网）
ZHISHUTAI&rowSpan 是我们将后台数据进行处理后的结果，比如说 我50条数据中，前10条是 直属台的同名字字段 例如：291台，这时候 我们就要自己计算出 291台有几个（因为计算机不知道 所以要通过JS去算出具体数据，然后重新拼装在JSON的数据中去，在这部分中进行调用。）
这时候 我们在通过这个字段将对应的rowSpan给确定下俩。涉及一个知识点 关于对象的引用 对象引用两种方式 “ . ” 点 与 “[]”中括号，一个表示确定静态的（确定内容的） 一个表示动态的（变量值） 而我们在判断对象是是否存在某一属性时 可以使用 in 属性或者是 hasOwnProperty 这两个属性。 一个延伸至继承属性（也就是原型上）， 一个仅在自有属性 。 此部分了解即可 因为 我也不知道 干啥可以用到 毕竟 闲鱼。