Antd表格之行/列合并
注意：antd官方行/列合并参考：#-table-demo--， 感觉网上大多是直接复制的antd代码。大家可以从这个链接，直到antd，或者您可以搜素antd官网进行查看
表格行/列合并
表头只支持列合并，使用 里的 进行设置。
表格支持行/列合并，使用 里的单元格属性 或者 设值为 0 时，设置的表格不会渲染。
合并关键词：[行合并] [列合并]
以上是Antd原展示，以及说明，这里大家可以直接跳转上面的连接查看相关说明。
我遇到的问题是：对于可编辑表格的数据合并。
1.如何处理表格可编辑。
2.如何标记编辑了哪一行[特别是跨行的时候]
3.提交数据【数据保存】
问题1解决：如何处理表格可编辑
其实如果你留意antd说明，你大概就知道了，antd中对于数据每一列，有一个方法
onst columns = [{title: '姓名',dataIndex: 'name',render(text, row, index) { // *** 1：关键就是这个render方法 ***if (index < 4) { return {text}; }return {children: {text}, //*** 2：可编辑关键就是这个 props: { colSpan: 5, }, // *** 3：合并行列关键};},
}]
注释1：表明我们可以通过这个方法任意扩展，需要的业务逻辑
注释2：表明我们可以返回任意的htm标签【当然包括input类，以及自己封装的组件】
注释3：这个对象我们可以设置，用来合并行列【跨列，跨行】
代码实现【部分】：
const columns = [{title: "节点名称",dataIndex: "nodename", render(value, row, index) { return that.fnGetRowSpanMerge(row, index, {value}); },},{title: "节点前附加操作",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 ({xxx}}/>);//目前是自己封装的组件 注意onchange时间}
问题2解决：如何标记编辑了哪一行[特别是夸行的时候]
主要利用解决问题1时预留的事件进行修改数据。
这里注意一点：既然你在合并这几行。那么标志着你不关心这些行，或者这些行数据一直。那么我们可以管理整个表单的数据，使这些行数据数据相同即可，
/*** 附加操作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; //使用可编辑表格，那么肯定会有一个原始数据供我们操作，这里就是tabledataconst {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.(), 后端： .();//转json数组.具体请参看我的另外一篇文章【我的JSON问题】
到此结束：欢迎大家指导。
