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

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,65 +109,79 @@ export default defineComponent({
       const config = useChartOption(data, type, data_label, other, props.data.max);
       option.value = config;
     }
-    watch(
-      () => props.data,
-      (data) => {
-        source.value = data.option;
-        tableSource.value = data.option;
-        tableSource.value.forEach(item => {
-          item.group_title = item.groupTitle;
-        });
-        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,
-              title: () => <RenderTableTitleLo title={item.title} tooltipType={item.key} />,
-              dataIndex: item.key,
-              key: item.key,
-              slots: { customRender: item.key },
-              width: 100,
-              // align: "center",
-              fixed: index === 0 ? "left" : null,
-              customRender,
-            };
-          } else if (item.key === 'number') {
-            return {
-              ...item,
-              title: () => <RenderTableTitle title={item.title} />,
-              dataIndex: item.key,
-              key: item.key,
-              slots: { customRender: item.key },
-              width: 100,
-              // align: "center",
-              fixed: index === 0 ? "left" : null,
-              sorter: (a, b) => { return a.number > b.number? -1 : 1 },
-              customRender,
-            };
-          } else {
-            return {
-              ...item,
-              title: () => <RenderTableTitle title={item.title} />,
-              dataIndex: item.key,
-              key: item.key,
-              slots: { customRender: item.key },
-              width: 100,
-              // align: "center",
-              fixed: index === 0 ? "left" : null,
-              customRender,
-            };
-          }
+    function onTableChange(pagination, filters, sorter) {
+      updateColumns(props.data, sorter);
+    }
 
-        }) || [];
-        tableInstance.value.data = tableSource.value;
-        tableInstance.value.columns = data.head;
-      },
-      {
-        immediate: true,
-      }
-    );
+    function updateColumns(d, sorter) {
+      const { columnKey, order } = sorter || {};
+      const data = d || props.data;
+
+      source.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;
+      });
+      tableInstance.value.data = tableSource.value;
+      columns.value = data.head?.map((item, index) => {
+        const customRender = generateTableCustomRender(tableSource.value, item);
+
+        if(item.key === 'answerRate' || item.key === 'rate') {
+          return {
+            ...item,
+            title: () => <RenderTableTitleLo title={item.title} tooltipType={item.key} />,
+            dataIndex: item.key,
+            key: item.key,
+            slots: { customRender: item.key },
+            width: 100,
+            // align: "center",
+            fixed: index === 0 ? "left" : null,
+            customRender,
+          };
+        } else if (item.key === 'number') {
+          return {
+            ...item,
+            title: () => <RenderTableTitle title={item.title} />,
+            dataIndex: item.key,
+            key: item.key,
+            slots: { customRender: item.key },
+            width: 100,
+            // align: "center",
+            fixed: index === 0 ? "left" : null,
+            sorter: true,
+            customRender,
+          };
+        } else {
+          return {
+            ...item,
+            title: () => <RenderTableTitle title={item.title} />,
+            dataIndex: item.key,
+            key: item.key,
+            slots: { customRender: item.key },
+            width: 100,
+            // align: "center",
+            fixed: index === 0 ? "left" : null,
+            customRender,
+          };
+        }
+
+      }) || [];
+      tableInstance.value.columns = data.head;
+    }
+
+    watch(() => props.data, updateColumns, { immediate: true });
 
     watch(chart, (val) => {
       chartInstance.value = val;
@@ -178,6 +193,7 @@ export default defineComponent({
       scroll,
       option,
       handleUpdateAction,
+      onTableChange,
     };
   },
 });