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

简介: 宜搭自定义表格合并单元格 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+

目录
相关文章
|
5月前
|
BI
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
627 0
|
11月前
|
数据格式
宜搭自定义页面组件 TablePc 渲染错误
宜搭自定义页面组件 TablePc 渲染错误
231 4
|
存储 前端开发 数据库
使用宜搭自定义页面搭建手机端应用
使用宜搭自定义页面搭建手机端应用
304 1
|
前端开发 搜索推荐 JavaScript
|
编解码 运维 监控
4.1 钉钉宜搭大屏介绍|学习笔记
快速学习4.1 钉钉宜搭大屏介绍
1809 0
4.1 钉钉宜搭大屏介绍|学习笔记
|
存储 安全 数据可视化
走进钉钉宜搭|学习笔记(一)
快速学习走进钉钉宜搭
948 0
走进钉钉宜搭|学习笔记(一)
|
5月前
|
JavaScript
基于钉钉的宜搭创建付款流程
基于钉钉的宜搭创建付款流程
120 0
|
5月前
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动

热门文章

最新文章

相关产品

下一篇
无影云桌面