Browse Source

fix: 修复表单区块的 key 生成逻辑,确保 v-if/else 分支的 key 唯一性

xieyong 2 days ago
parent
commit
277c6884d1
1 changed files with 6 additions and 4 deletions
  1. 6 4
      src/views/DangerousWorkList/components/workTicketForm.vue

+ 6 - 4
src/views/DangerousWorkList/components/workTicketForm.vue

@@ -15,7 +15,7 @@
       <!-- 分区 -->
       <div
         v-if="block.type === 'section'"
-        :key="block.key"
+        :key="`section-${block.key}`"
         class="ticket-section"
       >
         <div class="section-title">{{ block.data.title }}</div>
@@ -153,7 +153,7 @@
       </div>
 
       <!-- 子表(源系统 batch 类型) -->
-      <div v-else :key="block.key" class="ticket-section">
+      <div v-else :key="`table-${block.key}`" class="ticket-section">
         <div class="section-title">{{ block.data.title }}</div>
         <el-table
           :data="getRows(block.data)"
@@ -264,11 +264,13 @@
     },
     computed: {
       // 表单区块:分区与子表按 order 合并排序(未配置 order 时保持分区在前、子表在后)
+      // key 不带类型前缀,类型前缀由模板里的 v-if / v-else 分支各自拼上
+      // (同一条 v-if/else 的分支 key 必须不同,否则模板编译会报错)
       blocks() {
         const sections = (this.template?.sections || []).map(
           (section, index) => ({
             type: 'section',
-            key: `section-${section.title || index}`,
+            key: section.title || index,
             data: section,
             order:
               section.order === undefined || section.order === null
@@ -278,7 +280,7 @@
         );
         const tables = (this.template?.tables || []).map((table, index) => ({
           type: 'table',
-          key: `table-${table.id || index}`,
+          key: table.id || index,
           data: table,
           order:
             table.order === undefined || table.order === null