20260725172954

code/fms/fms-vue/src/views/dashboard/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, ref } from "vue";
+import { h, shallowRef } from "vue";
 import { message } from "antdv-next";
 import { Input, InputNumber, Select } from "antdv-next";
 import FmsTable from "@/components/fms-table/FmsTable.vue";
@@ -47,11 +47,11 @@ function buildData() {
   return rows;
 }
 
-const dataSource = ref(buildData());
+const dataSource = shallowRef(buildData());
 
 // 当前编辑行 key；进入编辑时留存快照，取消可还原
-const editingKey = ref(null);
-const editSnapshot = ref(null);
+const editingKey = shallowRef(null);
+const editSnapshot = shallowRef(null);
 
 function editConfigFor(c) {
   switch (c % 5) {
@@ -64,17 +64,20 @@ function editConfigFor(c) {
   }
 }
 
-// 单元格渲染：编辑行显示控件，其他行显示纯文本
+// 单元格渲染：编辑行显示控件，其他行直接返回文本值（让 stk-table 用原生 textContent 渲染，零 VNode 开销）
 function makeCellEditor(dataIndex, edit) {
+  const selectOptions = edit.options || [];
   return (props) => {
     const { row, cellValue } = props;
     if (row.id !== editingKey.value) {
+      // 非编辑态：直接返回文本字符串，不创建 VNode 包装
       if (edit.type === "select") {
-        const opt = (edit.options || []).find((o) => o.value === cellValue);
-        return h("span", { class: "cell-display" }, opt ? opt.label : (cellValue ?? ""));
+        const opt = selectOptions.find((o) => o.value === cellValue);
+        return opt ? opt.label : (cellValue ?? "");
       }
-      return h("span", { class: "cell-display" }, cellValue ?? "");
+      return cellValue ?? "";
     }
+    // 编辑态：返回编辑组件 VNode
     const update = (v) => {
       row[dataIndex] = v;
     };
@@ -97,7 +100,7 @@ function makeCellEditor(dataIndex, edit) {
       return h(Select, {
         ...common,
         value: cellValue,
-        options: edit.options || [],
+        options: selectOptions,
         "onUpdate:value": update,
       });
     }
@@ -133,7 +136,7 @@ function buildColumns() {
   return cols;
 }
 
-const columns = ref(buildColumns());
+const columns = shallowRef(buildColumns());
 
 function onRowClick(ev, row) {
   if (row.id === editingKey.value) return;
@@ -195,6 +198,7 @@ function rowClassName(row) {
         :data-source="dataSource"
         row-key="id"
         :row-class-name="rowClassName"
+        show-overflow
         @row-click="onRowClick"
       />
     </section>
@@ -252,16 +256,7 @@ function rowClassName(row) {
   padding: 12px 16px 16px;
 }
 
-:deep(.fms-row-editing) {
+::deep(.fms-row-editing) {
   background: rgba(22, 119, 255, 0.08) !important;
 }
-
-:deep(.cell-display) {
-  display: block;
-  min-height: 22px;
-  padding: 0 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 </style>