diff --git a/anrui-reportcenter-ui/src/views/branchofficestatistics/branchofficestatistics.vue b/anrui-reportcenter-ui/src/views/branchofficestatistics/branchofficestatistics.vue index 303a46c64c..df91950cf1 100644 --- a/anrui-reportcenter-ui/src/views/branchofficestatistics/branchofficestatistics.vue +++ b/anrui-reportcenter-ui/src/views/branchofficestatistics/branchofficestatistics.vue @@ -31,7 +31,7 @@
- + @@ -266,6 +266,80 @@ export default { } } }, + // 这个方法是 element-ui提供的单元格合并方法 + // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex } + // row: 当前行 + // column: 当前列 + // rowIndex:当前行号 + // columnIndex: 当前列号 + // 1代表: 独占一行 + // 更大的自然数: 代表合并了若干行 + // 0: 代表“消失”的哪那一个单元格,后面的单元格向前推一格 + mergeCol(id, rowIndex) { + // debugger + // 合并单元格 + // id: 属性名 + // rowIndex: 行索引值 + var idName = this.list[rowIndex][id] // 获取当前单元格的值 + if (rowIndex > 0) { + // 判断是不是第一行 + // eslint-disable-next-line eqeqeq + if (this.list[rowIndex][id] !== this.list[rowIndex - 1][id]) { + // 先判断当前单元格的值是不是和上一行的值相等 + var i = rowIndex + var num = 0 // 定义一个变量i,用于记录行索引值并进行循环,num用于计数 + while (i < this.list.length) { + // 当索引值小于table的数组长度时,循环执行 + if (this.list[i][id] === idName) { + // 判断循环的单元格的值是不是和当前行的值相等 + i++ // 如果相等,则索引值加1 + num++ // 合并的num计数加1 + } else { + i = this.list.length // 如果不相等,将索引值设置为table的数组长度,跳出循环 + } + } + return { + rowspan: num, // 最终将合并的行数返回 + colspan: 1 + } + } else { + return { + rowspan: 0, // 如果相等,则将rowspan设置为0 + colspan: 1 + } + } + } else { + // 如果是第一行,则直接返回 + let i = rowIndex + let num = 0 + while (i < this.list.length) { + // 当索引值小于table的数组长度时,循环执行 + if (this.list[i][id] === idName) { + i++ + num++ + } else { + i = this.list.length + } + } + return { + rowspan: num, + colspan: 1 + } + } + }, + objectSpanMethod({ row, column, rowIndex, columnIndex }) { + // 合并单元格 + switch ( + columnIndex // 将列索引作为判断值 + ) { + // 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并(索引0,1 指的是页面上的0,1) + // gzTroubles,gzID 这两个字段是我要合并的字段名 + case 0: + return this.mergeCol('useOrgName', rowIndex) + case 1: + return this.mergeCol('brandName', rowIndex) + } + }, // 表中序号 indexMethod(index) { var pagestart = (this.listQuery.current - 1) * this.listQuery.size diff --git a/anrui-reportcenter-ui/src/views/businessdivisionstatistics/businessdivisionstatistics.vue b/anrui-reportcenter-ui/src/views/businessdivisionstatistics/businessdivisionstatistics.vue index 0ff728430f..1782fe7066 100644 --- a/anrui-reportcenter-ui/src/views/businessdivisionstatistics/businessdivisionstatistics.vue +++ b/anrui-reportcenter-ui/src/views/businessdivisionstatistics/businessdivisionstatistics.vue @@ -31,9 +31,9 @@
- + - + @@ -233,9 +233,9 @@ export default { }) this.sids = aa }, - // 合并单元格 + // 合并单元格 旧方法暂时不用 rowspanMethod({ row, column, rowIndex, columnIndex }) { - if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { // 定位到需要合并的列 + if (columnIndex === 1) { // 定位到需要合并的列 // 获取当前单元格的值 const currentValue = row[column.property] // 获取上一行相同列的值 @@ -260,6 +260,83 @@ export default { } } }, + // 合并单元格 新方法 + // 这个方法是 element-ui提供的单元格合并方法 + // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex } + // row: 当前行 + // column: 当前列 + // rowIndex:当前行号 + // columnIndex: 当前列号 + // 1代表: 独占一行 + // 更大的自然数: 代表合并了若干行 + // 0: 代表“消失”的哪那一个单元格,后面的单元格向前推一格 + mergeCol(id, rowIndex) { + // debugger + // 合并单元格 + // id: 属性名 + // rowIndex: 行索引值 + var idName = this.list[rowIndex][id] // 获取当前单元格的值 + if (rowIndex > 0) { + // 判断是不是第一行 + // eslint-disable-next-line eqeqeq + if (this.list[rowIndex][id] !== this.list[rowIndex - 1][id]) { + // 先判断当前单元格的值是不是和上一行的值相等 + var i = rowIndex + var num = 0 // 定义一个变量i,用于记录行索引值并进行循环,num用于计数 + while (i < this.list.length) { + // 当索引值小于table的数组长度时,循环执行 + if (this.list[i][id] === idName) { + // 判断循环的单元格的值是不是和当前行的值相等 + i++ // 如果相等,则索引值加1 + num++ // 合并的num计数加1 + } else { + i = this.list.length // 如果不相等,将索引值设置为table的数组长度,跳出循环 + } + } + return { + rowspan: num, // 最终将合并的行数返回 + colspan: 1 + } + } else { + return { + rowspan: 0, // 如果相等,则将rowspan设置为0 + colspan: 1 + } + } + } else { + // 如果是第一行,则直接返回 + let i = rowIndex + let num = 0 + while (i < this.list.length) { + // 当索引值小于table的数组长度时,循环执行 + if (this.list[i][id] === idName) { + i++ + num++ + } else { + i = this.list.length + } + } + return { + rowspan: num, + colspan: 1 + } + } + }, + objectSpanMethod({ row, column, rowIndex, columnIndex }) { + // 合并单元格 + switch ( + columnIndex // 将列索引作为判断值 + ) { + // 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并(索引0,1 指的是页面上的0,1) + // gzTroubles,gzID 这两个字段是我要合并的字段名 + case 0: + return this.mergeCol('busOrgName', rowIndex) + case 1: + return this.mergeCol('useOrgName', rowIndex) + case 2: + return this.mergeCol('brandName', rowIndex) + } + }, // 表中序号 indexMethod(index) { var pagestart = (this.listQuery.current - 1) * this.listQuery.size diff --git a/anrui-reportcenter-ui/src/views/groupstatistics/groupstatistics.vue b/anrui-reportcenter-ui/src/views/groupstatistics/groupstatistics.vue index 01cf84a15a..944ff60bb7 100644 --- a/anrui-reportcenter-ui/src/views/groupstatistics/groupstatistics.vue +++ b/anrui-reportcenter-ui/src/views/groupstatistics/groupstatistics.vue @@ -31,8 +31,8 @@
- - + + @@ -250,6 +250,80 @@ export default { } } }, + // 这个方法是 element-ui提供的单元格合并方法 + // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex } + // row: 当前行 + // column: 当前列 + // rowIndex:当前行号 + // columnIndex: 当前列号 + // 1代表: 独占一行 + // 更大的自然数: 代表合并了若干行 + // 0: 代表“消失”的哪那一个单元格,后面的单元格向前推一格 + mergeCol(id, rowIndex) { + // debugger + // 合并单元格 + // id: 属性名 + // rowIndex: 行索引值 + var idName = this.list[rowIndex][id] // 获取当前单元格的值 + if (rowIndex > 0) { + // 判断是不是第一行 + // eslint-disable-next-line eqeqeq + if (this.list[rowIndex][id] !== this.list[rowIndex - 1][id]) { + // 先判断当前单元格的值是不是和上一行的值相等 + var i = rowIndex + var num = 0 // 定义一个变量i,用于记录行索引值并进行循环,num用于计数 + while (i < this.list.length) { + // 当索引值小于table的数组长度时,循环执行 + if (this.list[i][id] === idName) { + // 判断循环的单元格的值是不是和当前行的值相等 + i++ // 如果相等,则索引值加1 + num++ // 合并的num计数加1 + } else { + i = this.list.length // 如果不相等,将索引值设置为table的数组长度,跳出循环 + } + } + return { + rowspan: num, // 最终将合并的行数返回 + colspan: 1 + } + } else { + return { + rowspan: 0, // 如果相等,则将rowspan设置为0 + colspan: 1 + } + } + } else { + // 如果是第一行,则直接返回 + let i = rowIndex + let num = 0 + while (i < this.list.length) { + // 当索引值小于table的数组长度时,循环执行 + if (this.list[i][id] === idName) { + i++ + num++ + } else { + i = this.list.length + } + } + return { + rowspan: num, + colspan: 1 + } + } + }, + objectSpanMethod({ row, column, rowIndex, columnIndex }) { + // 合并单元格 + switch ( + columnIndex // 将列索引作为判断值 + ) { + // 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并(索引0,1 指的是页面上的0,1) + // gzTroubles,gzID 这两个字段是我要合并的字段名 + case 0: + return this.mergeCol('busOrgName', rowIndex) + case 1: + return this.mergeCol('brandName', rowIndex) + } + }, // 表中序号 indexMethod(index) { var pagestart = (this.listQuery.current - 1) * this.listQuery.size