elementUI 相同元素合并行

今天记录一下elementUI 相同元素合并行

把id相同的单元格进行合并
数据为

      tableData: [{id: '1',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '1',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '1',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '2',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '5',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '5',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]

话不多说
直接上代码
需要两个方法

  /*这个方法是控制单元格的返回值是一个对象例如：返回return {rowspan: 2,colspan: 1}是把当前的一个单元格和正下方的单元格合并且下一个单元格要返回return {rowspan: 0,colspan: 0}这是API给的我发现返回return {rowspan: 0,colspan: 1}也是可以的那合并单元格就十分容易了前提是数据已经根据id进行排序假如id为3的有四个数据只需要返回[4，1][0，1][0，1][0，1]即可用下面的setrowspans方法进行处理即可*/objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {return {rowspan: row.rowspan,colspan: 1}}},

    setrowspans() {// 先给所有的数据都加一个v.rowspan = 1this.tableData.forEach(v => {v.rowspan = 1})// 双层循环for (let i = 0; i < this.tableData.length; i++) {// 内层循环，上面已经给所有的行都加了v.rowspan = 1// 这里进行判断// 如果当前行的id和下一行的id相等// 就把当前v.rowspan + 1// 下一行的v.rowspan - 1for (let j = i + 1; j < this.tableData.length; j++) {if (this.tableData[i].id === this.tableData[j].id) {this.tableData[i].rowspan++this.tableData[j].rowspan--}}// 这里跳过已经重复的数据i = i + this.tableData[i].rowspan - 1}}

完整代码如下

<template><div class="wscn-http404-container"><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-columnprop="id"label="ID"width="180"/><el-table-columnprop="name"label="姓名"/><el-table-columnprop="amount1"label="数值 1（元）"/><el-table-columnprop="amount2"label="数值 2（元）"/><el-table-columnprop="amount3"label="数值 3（元）"/></el-table></div>
</template><script>export default {data() {return {tableData: [{id: '1',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '1',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '1',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '2',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '3',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '5',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}, {id: '5',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]}},created() {this.setrowspans()},methods: {/*这个方法是控制单元格的返回值是一个对象例如：返回return {rowspan: 2,colspan: 1}是把当前的一个单元格和正下方的单元格合并且下一个单元格要返回return {rowspan: 0,colspan: 0}这是API给的我发现返回return {rowspan: 0,colspan: 1}也是可以的那合并单元格就十分容易了前提是数据已经根据id进行排序假如id为3的有四个数据只需要返回[4，1][0，1][0，1][0，1]即可用下面的setrowspans方法进行处理即可*/objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {return {rowspan: row.rowspan,colspan: 1}}},setrowspans() {// 先给所有的数据都加一个v.rowspan = 1this.tableData.forEach(v => {v.rowspan = 1})// 双层循环for (let i = 0; i < this.tableData.length; i++) {// 内层循环，上面已经给所有的行都加了v.rowspan = 1// 这里进行判断// 如果当前行的id和下一行的id相等// 就把当前v.rowspan + 1// 下一行的v.rowspan - 1for (let j = i + 1; j < this.tableData.length; j++) {if (this.tableData[i].id === this.tableData[j].id) {this.tableData[i].rowspan++this.tableData[j].rowspan--}}// 这里跳过已经重复的数据i = i + this.tableData[i].rowspan - 1}}}
}</script><style lang="scss" scoped>
</style>

elementUI 相同元素合并行相关推荐

elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
sed行处理详解(交换行,合并行,删除行等)
1.合并行 zj@zj:~/Script/blog_script$ cat test1 1 2 3 4 合并上下两行 zj@zj:~/Script/blog_script$ sed '$!N;s/\n ...
java合并sheet行_java poi Excel循环合并行
//Java poi 实现循环合并行,还是第一次遇到这种问题 //在网上查了很多资料,都不是自己想要的 //以下为自己研究后,写的一点东西,给大家分享,希望对大家能有思路上的启发,也希望大家能提出宝贵 ...
Ant Design之表格动态合并行
在web开发中,表格的行合并是一个很常见的需求.antd也提供了这种功能,但是文档中的示例代码却和我想象中的相差甚远,如下所示,它是通过一种很笨的办法实现的行合并.这样当表格的数据源是动态获取的,我们 ...
Excel按某一列或多列合并行
如果以某一列或者几列为基准,只要这一列或多列的数据相同就合并这些行的数据,不管这些行的其他列的数据是否相同.例如下图: 比如按登录名和地区两列合并行.希望最终要得到的结果如下: (注,无需比对的其他列 ...
【editplus经常用的快捷键】Editplus 选中一行ctrl+r，Edit 合并行 Ctrl+Shift+J 合并选定行删除当前行
Editplus 选中一行: ctrl+r Editplus 复制一行: ctrl+r选择行,然后ctrl+c复制. 复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行 ...
java操作导出Excel（jxl导出WritableWorkbook）jxl合并单元格,单元格的设置，单元格居中、字体、大小、换行、合并行，列宽、自动换行撑起高度、指定特定字符串样式等
new WritableCellFormat().setWrap(true);//通过调整宽度和高度自动换行 1.1 需求描述 MS的电子表格(Excel)是Office的重要成员,是保存统计 ...
rowspan 动态变化_rowspan相同值合并怎么动态的rowspan合并行
php 怎么控制表格,相同数据合并显示一行 Html中colspan属性和rowspan属性合并后该单元格的一个是合并行.一个合并列 colspan=2就代表合并他和他同一列的后一个单元格 rowsp ...
antd Table合并行 rowSpan
实现这种效果,同一种知识点类型合并行. <Tablecolumns={columns}// dataSource={dataSource}dataSource={createNewArr(dat ...
poi判断合并行_POI实战2——实战代码
一.实战整理后的代码如下 @RequestMapping("/batchExport")public void batchExport(HttpServletResponse re ...

elementUI 相同元素合并行

elementUI 相同元素合并行相关推荐

最新文章

热门文章