摄影网站的制作,网站建设策划书ol,在线crm免费将夜2,自助建子站背景#xff1a;
需求是呈现一个表格#xff0c;根据操作人跟操作时间是否相同来进行合并行数据 数据结构#xff1a;
经过跟后端的同事商量#xff0c;需要在每一行数据中返回rowSpanNum的值#xff0c;前端在column中根据值来判断是否满足合并行#xff08;没有合并行…背景
需求是呈现一个表格根据操作人跟操作时间是否相同来进行合并行数据 数据结构
经过跟后端的同事商量需要在每一行数据中返回rowSpanNum的值前端在column中根据值来判断是否满足合并行没有合并行是rowSpanNum值是1有合并行时第一行的值大于1接下来的几行值是null
[{...,rowSpanNum: 1,},{...,rowSpanNum: 3,},{...,rowSpanNum: null,},{...,rowSpanNum: null,},{...,rowSpanNum: 1,},
]
前端处理column
在column的render里面我们可以定义一个obj对象给obj对象的rowSpan属性进行赋值处理再将obj返回即可
const columns [{title: 数量,dataIndex: 数量,width: 80px,align: right},{title: 日期,dataIndex: 日期,width: 90px},{title: 备注,dataIndex: 备注,},{title: 操作人,dataIndex: createName,width: 80px,render: (text, record, index) {const obj {children: isShowPopover(text),props: {},};if(record.rowSpanNum){obj.props.rowSpan record.rowSpanNum;}else{obj.props.rowSpan 0;}return obj;},},{title: 操作时间,dataIndex: createTime,width: 140px,render: (text, record, index) {const obj {children: text,props: {},};if(record.rowSpanNum){obj.props.rowSpan record.rowSpanNum;}else{obj.props.rowSpan 0;}return obj;},},]
效果如图
存在问题antd针对table的最后一个tr做了border-bottom: 0;的处理但是由于合并的行恰好能合并到table的最后一行但是本身不属于最后一个tr所以不具有该属性导致td本身的border-bottom跟table的boder-bottom双重渲染。好像antd的官网的table并不会出现这个问题估计是公司在封装table组件的时候出现了问题 解决方法
定义一个方法接收整个list跟当前行的index通过index截取剩下的list赋值给newArr数组for循环newArr数组判断接下来的元素是否还存在rowSpanNum有值的行信息如果有则保持当前td的borderBottom值如果没有则当前td的borderBottom为none
在column的中运用改方法修改style即可
borderBottomFunc (List, currentIndex) {let newArr List.slice(currentIndex1)for(let i0; inewArr.length; i){if(newArr[i].rowSpanNum){return }}return none
}// 修改column
{title: 操作人,dataIndex: createName,width: 80px,render: (text, record, index) {const obj {children: isShowPopover(text),props: {style: {borderBottom: this.borderBottomFunc(List, index)}},};if(record.rowSpanNum){obj.props.rowSpan record.rowSpanNum;}else{obj.props.rowSpan 0;}return obj;},
},
{title: 操作时间,dataIndex: createTime,width: 80px,render: (text, record, index) {const obj {children: isShowPopover(text),props: {style: {borderBottom: this.borderBottomFunc(List, index)}},};if(record.rowSpanNum){obj.props.rowSpan record.rowSpanNum;}else{obj.props.rowSpan 0;}return obj;},
},
效果如图
