antd 中 Table表格合并

1.先获取所要合并的列中的rowkey
2.当值在多个页面出现时重新记录rowSpan
3.合并相同的列

 const DataArr= [{Name: '小明',age: '',oid: '1',},...15个一样de // oid不一样{Name: '小明小明',age: '',oid: '17',}]

// 主要处理columns 中的合并列的render

 const columns = [{title: '结构名称',key: 'Name',render(_, row, Tindex) {let rowSpan = 1;let arrIndex = 0;DataArr.forEach((item, Dindex) => {if (item.oid === row.oid) {arrIndex = Dindex;// 先获取Name所在的arr的Dindex}});if (Tindex === 0) { // 当值在多个页面出现时重新记录rowSpanDataArr.forEach((item, Dindex) => {if (Dindex > arrIndex) {if (item.Name=== row.Name) {rowSpan += 1;}}});} else if (DataArr[arrIndex].Name=== DataArr[arrIndex - 1].Name) {rowSpan = 0;} else {DataArr.forEach((item, Dindex) => {if (Dindex > arrIndex) {if (item.Name=== row.Name) {rowSpan += 1;}}});}}return {children: row.Name,props: {rowSpan,},};},},{title: '主要结构病害',key: 'age',}]

antd 中 Table表格合并相关推荐

如何使antd中table表格不换行
.ant-table-thead > tr > th{ white-space:nowrap; } .ant-table-row td{ white-space:nowrap; } 在对用 ...
element table表格合并行和列
element-ui 官网案例: table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号row ...
table 表格合并
table 表格合并开发工具与关键技术:DW.JavaScript 作者:刘东标撰写时间:2019-03-14 <div ><div><span>colspan ...
antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
HTML中table表格拆分合拼(colspan、rowspan)
本文关键介绍了HTML中table表格拆分合拼(colspan.rowspan),原文中根据实例编码介绍的十分详尽,对大伙儿的学习或是工作中具备一定的参照学习使用价值,必须的小伙伴们下边伴随着小编来一 ...
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
Antd修改Table表格行间距
我们在使用Antd的table表格时,可能需要增大每行间距.如果直接在tr或td标签中使用margin或padding不会生效.像下图我把margin-top设置了1000px,页面明显可以看出没生效 ...
layui table 添加img_layui中table表格的基本操作
最近抽空总结了下layui中table表格的相关配置,解释的比较全面,可供大家参考,页面效果如下: table表格.png table表格html部分: 新增备注编辑 table表格渲染js (包 ...

antd 中 Table表格合并

antd 中 Table表格合并相关推荐

最新文章

热门文章