数据分析，基础分析，表格排序错乱；

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

@@ -22,6 +22,7 @@
         "
         rowKey="index"
         class="ant-table-striped"
+        @change="onTableChange"
       >
         <template
           v-for="col in columns"
@@ -160,10 +161,12 @@ export default defineComponent({
       option.value = config;
     }
 
-    watch(
+    function onTableChange(pagination, filters, sorter) {
-      () => props.data,
+      updateColumns(props.data, sorter);
-      (data) => {
+    }
-        const titleList = data.head.map((item) => item.title);
+
+    function updateTableSource(data, sorter) {
+      const { columnKey, order } = sorter || {};
       const tableData = data.option.map((item) => {
         const child_option = item.option;
         const obj = {};
@@ -175,6 +178,15 @@ export default defineComponent({
         obj.rowGroupTitle = item.rowGroupTitle;
         return obj;
       });
+      if (columnKey) {
+        tableData.sort((a, b) => {
+          switch(order) {
+            case "ascend": return a[columnKey] - b[columnKey];
+            case "descend": return b[columnKey] - a[columnKey];
+            default: return 0;
+          }
+        });
+      }
       tableSource.value = tableData;
 
       const radioOptions = tableData.map((item) => ({
@@ -183,8 +195,15 @@ export default defineComponent({
       }));
       plainOptions.value = radioOptions;
       value1.value = radioOptions[0]?.value ?? "";
-        head.value = data.head;
       tableInstance.value.data = tableData;
+    }
+
+    function updateColumns(d, sorter) {
+      const data = d || props.data;
+
+      updateTableSource(data, sorter);
+      const titleList = data.head.map((item) => item.title);
+      head.value = data.head;
       tableInstance.value.columns = data.head;
       if(data.group_head.length > 0){
         const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
@@ -202,9 +221,7 @@ export default defineComponent({
                 slots: {customRender: item.key},
                 width: 100,
                 // align: "center",
-                  sorter: (a, b) => {
+                sorter: true,
-                    return a[item.key] > b[item.key] ? -1 : 1
-                  },
               };
             } else {
               return {
@@ -226,7 +243,7 @@ export default defineComponent({
         });
         let column = [];
         data.head.map((item, index) => {
-            const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
+          const customRender = generateTableCustomRender(tableSource.value, 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') {
@@ -239,9 +256,7 @@ export default defineComponent({
                 width: 100,
                 // align: "center",
                 fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
-                  sorter: (index === 0 || hasRowGroup && index === 1) ? null : (a, b) => {
+                sorter: (index === 0 || hasRowGroup && index === 1) ? null : true,
-                    return a[item.key] > b[item.key] ? -1 : 1
-                  },
                 customRender,
               });
             } else {
@@ -277,7 +292,7 @@ export default defineComponent({
       } else {
         const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
         columns.value = data.head.map((item, index) => {
-            const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
+          const customRender = generateTableCustomRender(tableSource.value, 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 {
@@ -289,9 +304,7 @@ export default defineComponent({
               width: 100,
               // align: "center",
               fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
-                sorter: (index === 0 || hasRowGroup && index === 1) ? null : (a, b) => {
+              sorter: (index === 0 || hasRowGroup && index === 1) ? null : true,
-                  return a[item.key] > b[item.key] ? -1 : 1
-                },
               customRender,
             };
           } else {
@@ -309,11 +322,9 @@ export default defineComponent({
           }
         });
       }
-      },
-      {
-        immediate: true,
     }
-    );
+
+    watch(() => props.data, updateColumns, { immediate: true });
     watch(chart, (val) => {
       chartInstance.value = val
     })
@@ -327,6 +338,7 @@ export default defineComponent({
       option,
       handleUpdateAction,
       chart_params,
+      onTableChange,
     };
   },
 });

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

@@ -16,6 +16,7 @@
         :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
         rowKey="index"
         class="ant-table-striped"
+        @change="onTableChange"
       >
         <template v-for="col in columns" #[col.dataIndex]="{ text }" :key="col.dataIndex">
           <render-table-title :title="text"></render-table-title>
@@ -108,17 +109,34 @@ export default defineComponent({
       const config = useChartOption(data, type, data_label, other, props.data.max);
       option.value = config;
     }
-    watch(
+
-      () => props.data,
+    function onTableChange(pagination, filters, sorter) {
-      (data) => {
+      updateColumns(props.data, sorter);
+    }
+
+    function updateColumns(d, sorter) {
+      const { columnKey, order } = sorter || {};
+      const data = d || props.data;
+
       source.value = data.option;
-        tableSource.value = data.option;
+      tableSource.value = (data.option || []).sort((a, b) => {
+        if (!columnKey) {
+          return 0;
+        }
+        switch(order) {
+          case "ascend": return a[columnKey] - b[columnKey];
+          case "descend": return b[columnKey] - a[columnKey];
+          default: return 0;
+        }
+      });
+      console.log('====', tableSource.value)
+      console.log('----', columnKey, order)
       tableSource.value.forEach(item => {
         item.group_title = item.groupTitle;
       });
-        console.log("tableSource",tableSource.value);
+      tableInstance.value.data = tableSource.value;
       columns.value = data.head?.map((item, index) => {
-          const customRender = generateTableCustomRender(data, item);
+        const customRender = generateTableCustomRender(tableSource.value, item);
 
         if(item.key === 'answerRate' || item.key === 'rate') {
           return {
@@ -142,7 +160,7 @@ export default defineComponent({
             width: 100,
             // align: "center",
             fixed: index === 0 ? "left" : null,
-              sorter: (a, b) => { return a.number > b.number? -1 : 1 },
+            sorter: true,
             customRender,
           };
         } else {
@@ -160,13 +178,10 @@ export default defineComponent({
         }
 
       }) || [];
-        tableInstance.value.data = tableSource.value;
       tableInstance.value.columns = data.head;
-      },
-      {
-        immediate: true,
     }
-    );
+
+    watch(() => props.data, updateColumns, { immediate: true });
 
     watch(chart, (val) => {
       chartInstance.value = val;
@@ -178,6 +193,7 @@ export default defineComponent({
       scroll,
       option,
       handleUpdateAction,
+      onTableChange,
     };
   },
 });

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

@@ -8,16 +8,18 @@
  */
 export function generateTableCustomRender(data, item, key = "group_title", field = "groupTitle") {
   return item.key !== key ? null : ({ text, index }) => {
-    let rowSpan = 0;
+    let rowSpan = 1;
 
-    const options = data.option || [];
+    const options = data || [];
     const prevGroupTitle = options[index - 1]?.[field];
 
     if(!text) {
       rowSpan = 1;
-    } else if(!index || prevGroupTitle !== text) {
+    } else if(text === prevGroupTitle) {
+      rowSpan = 0;
+    } else {
       for(let i = index; i < options.length; i += 1) {
-        if(text === options[i]?.[field]) {
+        if(text === options[i + 1]?.[field]) {
           rowSpan += 1;
         } else {
           break;