antdesgin-vue表格合并单元格，且序号根据合并单元格排序

先贴效果图

主要使用官方api提供的配置项

 customRender: (value, row) => {const obj = {children: row.Nosort,attrs: {},};obj.attrs.rowSpan = row.rowSpan;return obj;},

这里的 rowSpan字段是自己根据表格数据判断添加跨行字段,Nosort字段是用来表格序号排序的，因为合并单元格，两个单元格之间肯定有相同字段或者关联性字段，我们首先对原来的表格数据数组进行处理，将需要合并的表格对象数据进行合并形成一个新的数组，例如：

  // 对象数组去重function uniqueObjArr(arr, fieldName) {const result = [];const resultArr = [];arr.forEach((child) => {if (result.indexOf(child[fieldName]) === -1) {result.push(child[fieldName]);resultArr.push(child);}});return resultArr;};// 去重并合并到childrenfunction sortData(dataArr) {const orgArrRe = dataArr.map(item => ({ ruleName: item.ruleName }));const orgArr = this.uniqueObjArr(orgArrRe, 'ruleName');// 数组去重orgArr.forEach((childOne) => { // 去重reportName合并到children，得到一共有几个不同的reportName要合并childOne.children = [];dataArr.forEach((childTwo) => {if (childOne.ruleName === childTwo.ruleName) { // childOne是去重的，childTwo是没去重的childOne.children.push(childTwo);}});});orgArr.forEach((every) => {every.span = every.children ? every.children.length : 0;});return orgArr;};var arrs = [{ruleName: '一类',name: '张三',age: 16,},{ruleName: '一类',name: '李四',age: 15,},{ruleName: '二类',name: '张三',age: 16,}];var newarr = sortData(arrs);console.log(newarr)// {//   ruleName: "一类", children: [//     { ruleName: "一类", name: "张三", age: 16 },//     { ruleName: "一类", name: "李四", age: 15 }//   ], span: 2// },// {//   ruleName: "二类", children: [//     { ruleName: "二类", name: "张三", age: 16 }//   ], span: 1// }

将一类的数组对象（对象字段值相同的对象）进行合并，得到一个包含children的二维数组,最后当antdesign-table组件绑定table数据时，再次绑定一个函数makeData

  <a-tablerowKey="kid"size="middle":loading="loading":columns="columns":data-source="makeData(itemList)":scroll="{ y: 240 }":pagination="false"></a-table>

js:

 // 遍历子元素，并赋值纵向合并数rowSpanmakeData(data) {const sortResult =this.sortData(data);// 该sortData函数在上面const dataSource = [];var Nosort = 0;sortResult.forEach((item) => {if (item.children) {item.children.forEach((itemOne, indexOne) => {const myObj = itemOne;myObj.rowSpan = indexOne === 0 ? item.span : 0;myObj.Nosort = myObj.rowSpan === 0 ? Nosort : ++Nosort;dataSource.push(myObj);});}});return dataSource;},

这里最后说一下，开发时遇到的问题，本来一开始只声明了一个rowspan字段用来跨行是足够的，但是后续产品说序号才发现，跨行对序号排列不友好，所以多声明了一个Nosort字段，用来序号排列展示

antdesgin-vue表格合并单元格，且序号根据合并单元格排序相关推荐

VUE 表格设置序号
这里写自定义目录标题 vue表格方法 vue表格 <el-table-column type="index" label="序号" width=&quo ...
vue实现表格单元格的拆分、合并
在之前的项目中,我接到一个需求,需要一个类似excel的表格合并和拆分的需求. 目前我自己初步实现是这样子的我们的项目是前后分离的,后端用的是.net,前端用的是vue,得到这个需求之后,我的第一反 ...
tstringgrid 单元格区域获取_对合并单元格的序号填充还在一个个的手动录入？那就真的Out了！...
在实际的工作中,经常会遇到对合并单元格填充序号的操作,如果合并的单元格格式一致,直接拖动填充柄就可以,如下图: 但我们遇到的表格并不都是非常规则的,如果还要继续拖动则达不到既定的目的,如下图: 遇到此 ...
怎么在html的表格中加筛选,excel中表头合并单元格的筛选
EXCEL中表头合并,怎么实现筛选数据? 亲,如下面的动画演示,选中第5行,点击菜单"数据","筛驯. excel中有合并单元格的行怎么才能筛选整个表格其中直接对合并过 ...
Excel表格中多个文本内容快速合并到一个单元格内
Excel表格中多个文本内容快速合并到一个单元格内目录 Excel表格中多个文本内容快速合并到一个单元格内 1.在合并单元格内输入"=PHONETIC()"函数 2.框选需要合并 ...
C# Aspose Word表格合并、拆分、增删行、单元格操作
合并单元格 //合并比较简单//横向 cell.CellFormat.HorizontalMerge = CellMerge.First; //开始合并单元格 cell.CellFormat.Hori ...
html表格里面怎么合并单元格的快捷键,excel合并单元格快捷键是什么
excel合并单元格快捷键是什么快捷键的熟练使用可以帮助我们在工作中提高效率,那么excel合并单元格快捷键是什么呢?接下来为大家讲解excel合并单元格快捷键设置方法的图文演示. 合并单元格在ex ...
表格怎么合并两列数据php,怎么合并两列单元格的文字
合并两列单元格的文字的方法:首先打开一个excel表:然后选择一个要放合并之后内容的单元格,并在单元格中输入公式"=A1&B1()":最后按Enter回车键即可. 本文操作 ...
asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...
需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列. 1.官方文档通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列col ...
Word和Excel齐发力，将多个单元格的文本内容合并到一个单元格
有时候在处理Excel表格的时候,我们需要将多个单元格的文本内容合并到一个单元格中,中间添加\或,之类的分隔符.比如下面这个表格,左侧是原始单元格的内容,右侧是希望合并的结果,每个单元格之间用逗号分隔 ...

antdesgin-vue表格合并单元格，且序号根据合并单元格排序

antdesgin-vue表格合并单元格，且序号根据合并单元格排序相关推荐

最新文章

热门文章