分析，基础分析，表格行列分组；

src/views/DataAnalyse/diagram/components/MultiChart.vue

@@ -42,6 +42,7 @@ import pieChart from "@/components/chart/PieChart";
 import ChartAction from "@/views/DataAnalyse/diagram/components/ChartAction";
 import RenderTableTitle from "@/views/DataAnalyse/components/RenderTableTitle";
 import useMultiChartOption from "@/views/DataAnalyse/diagram/composables/useMultiChartOption";
+import { generateTableCustomRender } from "./renderTableGroup";
 
 function clearData(data) {
   return data.filter((item) => {
@@ -184,10 +185,11 @@ export default defineComponent({
         tableInstance.value.data = tableData;
         tableInstance.value.columns = data.head;
         if(data.group_head.length > 0){
+          const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
           let keys = [];
           columns.value = data.group_head.map((groupItem) => {
             let children = [];
-            children = groupItem.children.map((item, index) => {
+            children = groupItem.children.map((item) => {
               keys.push(item.key);
               if (item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
                 return {
@@ -198,7 +200,6 @@ export default defineComponent({
                   slots: {customRender: item.key},
                   width: 100,
                   // align: "center",
-                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null,
                   sorter: (a, b) => {
                     return a[item.key] > b[item.key] ? -1 : 1
                   },
@@ -212,7 +213,6 @@ export default defineComponent({
                   slots: {customRender: item.key},
                   width: 100,
                   // align: "center",
-                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null
                 };
               }
             });
@@ -223,6 +223,8 @@ export default defineComponent({
           });
           let column = [];
           data.head.map((item, index) => {
+            const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
+
             if(!keys.includes(item.key)){
               if (item.key !== 'rowGroupTitle' && item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
                 column.push({
@@ -233,10 +235,11 @@ export default defineComponent({
                   slots: {customRender: item.key},
                   width: 100,
                   // align: "center",
-                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null,
+                  fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
-                  sorter: (a, b) => {
+                  sorter: (index === 0 || hasRowGroup && index === 1) ? null : (a, b) => {
                     return a[item.key] > b[item.key] ? -1 : 1
                   },
+                  customRender,
                 });
               } else {
                 column.push({
@@ -247,7 +250,8 @@ export default defineComponent({
                   slots: {customRender: item.key},
                   width: 100,
                   // align: "center",
-                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null
+                  fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
+                  customRender,
                 });
               }
             }
@@ -260,13 +264,18 @@ export default defineComponent({
           if(option){
             column.splice(column.indexOf(option),1);
           }
+          column = column.map((i) => {
+            return {
+              title: "",
+              children: [i],
+            };
+          });
           columns.value = [group,option,...columns.value,...column];
         } else {
-          let index = data.head.findIndex(item => item.key == 'rowGroupTitle');
+          const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
-          if(index != -1){
-            data.head.splice(index,1);
-          }
           columns.value = data.head.map((item, index) => {
+            const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
+
             if (item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
               return {
                 ...item,
@@ -276,10 +285,11 @@ export default defineComponent({
                 slots: {customRender: item.key},
                 width: 100,
                 // align: "center",
-                fixed: (index === 0 || item.key === 'avg') ? 'left' : null,
+                fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
-                sorter: (a, b) => {
+                sorter: (index === 0 || hasRowGroup && index === 1) ? null : (a, b) => {
                   return a[item.key] > b[item.key] ? -1 : 1
                 },
+                customRender,
               };
             } else {
               return {
@@ -290,7 +300,8 @@ export default defineComponent({
                 slots: {customRender: item.key},
                 width: 100,
                 // align: "center",
-                fixed: (index === 0 || item.key === 'avg') ? 'left' : null
+                fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
+                customRender,
               };
             }
           });

src/views/DataAnalyse/diagram/components/SingleChart.vue

@@ -33,6 +33,7 @@ import RenderTableTitle from "@/views/DataAnalyse/components/RenderTableTitle";
 import RenderTableTitleLo from "@/views/DataAnalyse/components/RenderTableTitleLo";
 import useChartOption from "@/views/DataAnalyse/diagram/composables/useChartOption";
 import * as cheerio from "cheerio";
+import { generateTableCustomRender } from "./renderTableGroup";
 
 function clearData(data) {
   return data.filter((item) => item.number !== 0);
@@ -117,6 +118,8 @@ export default defineComponent({
         });
         console.log("tableSource",tableSource.value);
         columns.value = data.head?.map((item, index) => {
+          const customRender = generateTableCustomRender(data, item);
+
           if(item.key === 'answerRate' || item.key === 'rate') {
             return {
               ...item,
@@ -127,6 +130,7 @@ export default defineComponent({
               width: 100,
               // align: "center",
               fixed: index === 0 ? "left" : null,
+              customRender,
             };
           } else if (item.key === 'number') {
             return {
@@ -139,6 +143,7 @@ export default defineComponent({
               // align: "center",
               fixed: index === 0 ? "left" : null,
               sorter: (a, b) => { return a.number > b.number? -1 : 1 },
+              customRender,
             };
           } else {
             return {
@@ -150,6 +155,7 @@ export default defineComponent({
               width: 100,
               // align: "center",
               fixed: index === 0 ? "left" : null,
+              customRender,
             };
           }
 

src/views/DataAnalyse/diagram/components/renderTableGroup.js

@@ -0,0 +1,34 @@
+/**
+ * 生成一个用于 SingleChart.vue 和 MultiChart.vue 的 customRender 的方法
+ * 目前仅用于合并分组
+ * @param data
+ * @param item
+ * @param key
+ * @param field
+ */
+export function generateTableCustomRender(data, item, key = "group_title", field = "groupTitle") {
+  return item.key !== key ? null : ({ text, index }) => {
+    let rowSpan = 0;
+
+    const options = data.option || [];
+    const prevGroupTitle = options[index - 1]?.[field];
+
+    if(!text) {
+      rowSpan = 1;
+    } else if(!index || prevGroupTitle !== text) {
+      for(let i = index; i < options.length; i += 1) {
+        if(text === options[i]?.[field]) {
+          rowSpan += 1;
+        } else {
+          break;
+        }
+      }
+    }
+
+    return {
+      children: text,
+      props: { rowSpan, colSpan: 1 },
+    };
+  };
+
+}