antd合并表格,并使用fixed布局

    const temp = {}; // 当前重复的值,支持多列const isAllEqual = array => {if (array.length > 0) {return !array.some((value, index) => value !== array[0]);}return true;};/*** 动态合并表格方法* @param {*} text 表格每列对应的值* @param {*} data 后台返回的展示数据数组, 数据需要按字段排序* @param {*} columns 表格每列表头字段*/const mergeCells = (text, data, columns) => {let i = 0;if (text !== temp[columns]) {temp[columns] = text;data.forEach(item => {if (item[columns] === temp[columns]) {i += 1;}});}return i;};const columns = [{title: '姓名',dataIndex: 'name',key: 'name',width: '120px',fixed: true,ellipsis: true,render: (text, row, index) => {const obj = {children: text,props: {},};// mergeCells这样合并时可以的，但是fixed布局下会有问题 所以判断显示// 数据只有一条的情况if (tableData.length === 1) {obj.props.rowSpan = 1;} else if (isAllEqual(tableData.map(el => el.id))) {obj.props.rowSpan = index === 0 ? tableData.length : 0;} else {obj.props.rowSpan = mergeCells(row.id, tableData, 'id');}return obj;},},
]

实现效果

antd合并表格,并使用fixed布局相关推荐

在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效
来自文章 http://www.jb51.net/css/153601.html 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对 ...
Aspose.Words for .NET使用表格教程之水平和垂直合并表格中单元格
Aspose.Words For .Net是一种高级Word文档处理API,用于执行各种文档管理和操作任务.API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsof ...
day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、转义（实体）字符、基本表格、合并表格
HTML 一 HTML概述超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
每日一题（合并表格）
前言:为了让小伙伴更方便的学习编程语言,小白每天都会分享一道编程题.小白也创建了一个微信公众号,会同步更新题目和相关的视觉领域的知识,如果小伙伴不方便在网页上阅读文章,可以关注微信公众号"小 ...
使用jquery合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
Web移动端Fixed布局的解决方案
Web移动端Fixed布局的解决方案参考文章: (1)Web移动端Fixed布局的解决方案 (2)https://www.cnblogs.com/sxgxiaoge/p/9257648.html 备 ...
css 解决fixed 布局下不能滚动的问题
css 解决fixed 布局下不能滚动的问题参考文章: (1)css 解决fixed 布局下不能滚动的问题 (2)https://www.cnblogs.com/fuzitu/p/9473508.h ...
合并表格，并实现对datatable的group by 功能
没有想到好的方法,这是最笨的方法,对datatable的逐行进行汇总. DataTable ddt = new DataTable(); for (int i = 0; i ...

antd合并表格,并使用fixed布局

antd合并表格,并使用fixed布局相关推荐

最新文章

热门文章