【分享】宜搭自定义表格如何实现合并相同单元格

简介: 宜搭自定义表格合并单元格 by 页一 转载请注明出处

目前已生成示例,可一键启用试玩:

https://www.aliwork.com/bench/coe?tplUuid=TPL_UTK63IM281XRSXLNOJUV&from=yuque_subject


  • 效果如下:

image.png

// 定义一个函数来计算每个字段的rowSpan值 by 页一 // data 为传入的数据源数据,格式为数组// keys 就是要合并的单元格字段,格式为数组functioncalculateRowSpan(data, keys) {
letvalueList= [];
keys.forEach((key, index) => {
letn=0;
for (leti=0; i<data.length; i++) {
valueList[i] =valueList[i] &&`${valueList[i]}_${data[i][key]}`||data[i][key]; 
if (i===0||valueList[i] !==valueList[i-1]) {
n=i;
if (!data[i].rowSpan) data[i].rowSpan= {};
data[i].rowSpan[key] =1;
      } else {
if (!data[i].rowSpan) data[i].rowSpan= {};
data[i].rowSpan[key] =0;
data[n].rowSpan[key]++;
      }
    }
  })
}
// 数据会被处理成这个样子,多一个rowSpan对象属性{
"field_leoxpao1": "2024",
"field_leoxpanx": "01",
"field_leoxpanz": "页一",
"field_lep1oqa9": "2023/03/07 08:00-09:00",
"field_leoxpao5": "我是谁",
"rowSpan": {
"field_leoxpao1": 8,
"field_leoxpanx": 8,
"field_leoxpanz": 2    }
}
// 使用方法 先处理数据,再给表格的cellProps事件配置回调// keys 为要合并单元格的字段// 特别注意,这些字段不是乱传的,必须按表格字段从左到右的顺序// 因为合并顺序是从左到右constkeys= ['field_leoxpao1', 'field_leoxpanx', 'field_leoxpanz'];
// 处理数据,合并单元格使用// res.data 一般是数据源请求的数据// calculateRowSpan 这个函数会修改原数据,只增加一个属性,不影响其他数据// 等待calculateRowSpan处理完数据,你就可以setState()给表格的绑定的变量calculateRowSpan(res.data, keys);
// 表格的单元格分割与合并 cellProps 事件// 事件所在位置:  表格=>风格和样式=>单元格分割合并exportfunctioncellProps(rowIndex, colIndex, dataIndex, record) {
//如果不是mock数据,在设计模式这个属性是undefined直接退出,避免设计模式报错if (!record.rowSpan) return;  
if (keys.includes(dataIndex))
return { rowSpan: record.rowSpan[dataIndex] };
}

钉钉.png+

目录
打赏
0
2
2
4
99
分享
相关文章
|
10月前
|
BI
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
865 0
宜搭自定义页面组件 TablePc 渲染错误
宜搭自定义页面组件 TablePc 渲染错误
293 4
使用宜搭自定义页面搭建手机端应用
使用宜搭自定义页面搭建手机端应用
376 1
|
12天前
宜搭接入钉钉闪记,会议记录、拜访录入效率飙升!
钉钉闪记是一款实时记录并快速实现语音转文字的工具,特别适合处理冗长的会议或培训视频。通过与宜搭平台的无缝集成,用户可以一键获取会议的关键知识点和重要内容片段,自动生成结构清晰的会议纪要,极大提升了工作效率。无论是销售拜访还是头脑风暴,闪记都能显著减少整理会议资料的时间,为企业带来高效的办公体验。
68 11
|
10月前
|
基于钉钉的宜搭创建付款流程
基于钉钉的宜搭创建付款流程
228 0

热门文章

最新文章

相关产品

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等