Antd表格之行/列合并

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

表格行/列合并
表头只支持列合并，使用 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用来合并行列【跨列，跨行】

代码实现【部分】：

 const columns = [
            {
                title: <span> "节点名称"</span>,
                dataIndex: "nodename", 
                render(value, row, index) {  return that.fnGetRowSpanMerge(row, index, <span>{value}</span>);    },
            },
            {
                title: <span> "节点前附加操作"</span>,
                dataIndex: "action_node_pre", 
                render(value, row, index) {
                    return that.fnGetRowSpanMerge(row, index, that.fnGetBrowBtn(row, getLabel(388414, "契约锁") + "action", "action_node_pre", true, false));
                },
            }]

  /**  获取行并信息 @value 文本值 @row 整行的数据 @index 行下标 @children ta的数据格式具体 @ishow 是否显示空数据  */
    fnGetRowSpanMerge = (row, index, children, ishow) => {//这个方法用来跨行跨列
        const obj = {
            props: {rowSpan: 1,},
            children: children,
        }
        if (row.linksize > 1 && !ishow) {//包含跨行,且不显示多行相同数据
            obj.props.rowSpan = row.rowspan;
        } 
        return obj;
    }
  /** * 获取浏览按钮的信息  @param row 行信息 @param title 浏览框title  @param id 数据源id @param isnode 是否是节点  @param islink 是否是出口  @returns {*}  */
    fnGetBrowBtn = (row, title, id, isnode, islink) => {//通过该方法返回表格数据， 可以是check，select， input，以及封装的组件
        let replacedatas = toJS(row[id + "rep"]);
        return (<WeaBrowser onChange={()=>{xxx}}/>);//目前是自己封装的组件   注意onchange时间
     }

问题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问题】

---

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