Antd表格之行/列合并

左手的ㄟ右手 2022-03-12 10:35 1792阅读 0赞

### Antd--表格之行/列合并 ###

注意：antd官方行/列合并参考：[https://1x.ant.design/components/table/\#components-table-demo-colspan-rowspan，][https_1x.ant.design_components_table_components-table-demo-colspan-rowspan] 感觉网上大多是直接复制的antd代码。大家可以从这个链接，直到antd，或者您可以搜素antd官网进行查看

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]  
**表格行/列合并**  
表头只支持列合并，使用 column 里的 colSpan 进行设置。  
表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。  
合并关键词：rowSpan\[行合并\] colSpan\[列合并\]  
以上是Antd原展示，以及说明，这里大家可以直接跳转上面的连接查看相关说明。

--------------------

我遇到的问题是：对于可编辑表格的数据合并。  
1.如何处理表格可编辑。  
2.如何标记编辑了哪一行\[特别是跨行的时候\]  
3.提交数据【数据保存】  
**问题1解决：如何处理表格可编辑**  
其实如果你留意antd说明，你大概就知道了，antd中对于数据每一列，有一个**render方法**

onst columns = [{
 title: '姓名',
 dataIndex: 'name',
 render(text, row, index) { 	// *** 1：关键就是这个render方法 ***
 if (index < 4) { return <a href="#">{text}</a>; }
 return {
 children: <a href="#">{text}</a>, 			 //*** 2：可编辑关键就是这个 
 props: { colSpan: 5, }, 	 // *** 3：合并行列关键
 };
 },
 }]

**注释1：表明我们可以通过这个方法任意扩展，需要的业务逻辑  
注释2：表明我们可以返回任意的htm标签【当然包括input类，以及自己封装的组件】  
注释3：这个对象我们可以设置colSpan，rowSpan用来合并行列【跨列，跨行】**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]  
代码实现【部分】：

**问题2解决：如何标记编辑了哪一行\[特别是夸行的时候\]**  
主要利用解决问题1时预留的onchange事件进行修改数据。  
这里注意一点：既然你在合并这几行。那么标志着你不关心这些行，或者这些行数据一直。那么我们可以管理整个表单的数据，**使这些行数据数据相同即可，**

/**
         * 附加操作onchange事件，这里主要是正对浏览按钮
         * @param ids_value 改变后的ids值
         * @param names_value 改变后的value值
         * @param datas 改变数据的封装【可以传null】
         * @param row 所属改变行的整体数据
         * @param id 列id
         * @param isnode 是否是节点
         * @param islink 是否是出口
         */
        fnAdditionalChange = (ids_value, names_value, datas, row, id, isnode, islink) => {
            const {myCusIntSet} = this.props;				//使用可编辑表格，那么肯定会有一个原始数据供我们操作，这里就是tabledata
            const {tabledata, updateTableData} = myCusIntSet;
            tabledata && tabledata.map(item => {
                if (isnode && item.nodeid == row.nodeid) {//这里就是同步所有行的数据一致
                    item[id] = ids_value;
                    item[id + "span"] = names_value;
                }
                if (islink && item.linkid == row.linkid) {//这里是同步所有列的数据一致
                    item[id] = ids_value;
                    item[id + "span"] = names_value;
                }
            })
            tabledata && updateTableData(toJS(tabledata));
        }

解决关键：对于原始数据上操作时，相同的行列数据，给定**特定的标识符**【用同样的id，或者其他属性】

**问题3解决：提交数据【数据保存】**  
这里我们可以通过set集合判断数据是否重复，从而去掉重复数据。或者执行数据持久时，先判断数据是否存在，存在相同数据则不保存即可。  
**特别注意**：对于这种可编辑数据我们传递给后台需要做数据转换**前端：JSON.stringify**(tabledata), **后端： JSONArray.fromObject**(tabledata);//转json数组.具体请参看我的另外一篇文章【[我的JSON问题][JSON]】

--------------------

到此结束：欢迎大家指导。

[https_1x.ant.design_components_table_components-table-demo-colspan-rowspan]: https://1x.ant.design/components/table/#components-table-demo-colspan-rowspan%EF%BC%8C
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]: /images/20220312/82bb028149ed4912ae1f27bf943c5cc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]: /images/20220312/6370cf9b822649a28f20e95957a831e9.png
[JSON]: https://blog.csdn.net/ljcc122/article/details/83032834