From 75826cbf0e6b2459c828c467161b32c5cdc27b25 Mon Sep 17 00:00:00 2001
From: yunuo970428 <405378304@qq.com>
Date: Wed, 28 Feb 2024 11:15:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=9B=86=E5=9B=A2=E6=97=A5?=
=?UTF-8?q?=E6=8A=A5=E8=A1=A8=E3=80=81=E4=BA=8B=E4=B8=9A=E9=83=A8=E6=97=A5?=
=?UTF-8?q?=E6=8A=A5=E8=A1=A8=E3=80=81=E5=88=86=E5=85=AC=E5=8F=B8=E6=97=A5?=
=?UTF-8?q?=E6=8A=A5=E8=A1=A8--=E5=90=88=E5=B9=B6=E5=8D=95=E5=85=83?=
=?UTF-8?q?=E6=A0=BC--=E5=88=86=E5=85=AC=E5=8F=B8=E5=88=97=E6=95=B0?=
=?UTF-8?q?=E6=8D=AE=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=85=A8=E7=9A=84=E9=97=AE?=
=?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../branchofficestatistics.vue | 76 ++++++++++++++++-
.../businessdivisionstatistics.vue | 85 ++++++++++++++++++-
.../views/groupstatistics/groupstatistics.vue | 78 ++++++++++++++++-
3 files changed, 232 insertions(+), 7 deletions(-)
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 @@
-
+
-
+
{{ scope.row.useOrgName }}
@@ -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 @@
-
-
+
+
{{ scope.row.busOrgName }}
@@ -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