表头分离表格 实现方法改变

src/components/Adult/inputModules/HeaderSeparate/index.vue

@@ -241,7 +241,6 @@ export default {
         type: "warning",
       })
         .then(() => {
-          if (this.cols <= 3) return this.$message.warning("必须留三列");
           this.curQue.tableData.body.forEach(({ content }) => {
             content.splice(i, 1);
           });

src/components/Adult/preview/HeaderSeparate.vue

@@ -32,13 +32,6 @@
             v-for="(col, j) in row.content"
             :key="`td-${j}`"
             :class="[
-              `${
-                j === 0
-                  ? 'bor-l'
-                  : j === row.content.length - 1
-                    ? 'bor-r'
-                    : 'bor-c'
-              }`,
               `${curQue.firstColAligin === 'center' ? 'col-center' : ''}`,
             ]"
           >
@@ -120,7 +113,8 @@
             <div
               v-else-if="col.type === 'prePinyin'"
               :style="{
-                'flex-direction': col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse'
+                'flex-direction':
+                  col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse',
               }"
               class="pre-pinyin"
             >
@@ -296,65 +290,49 @@ export default {
           display: flex;
         }
       }
-    }
 
-    .pinyin {
-      font-family: "GB-PINYINOK-B";
-    }
+      &:first-child {
+        border-left: 2px solid transparent;
+        border-bottom-width: 1px;
+        border-image: linear-gradient(
+            transparent 6px,
+            #e7b576 6px,
+            #e7b576 calc(100% - 6px),
+            transparent calc(100% - 6px),
+            transparent calc(100% - 2px),
+            #cecece calc(100% - 2px)
+          )
+          2;
+        border-image-outset: 0 4px 0 0;
 
-    .chs {
-      font-family: "FZJCGFKTK";
-    }
-
-    .bor-l {
-      border-left: 2px solid transparent;
-      border-bottom-width: 1px;
-      border-image: linear-gradient(
-          transparent 6px,
-          #e7b576 6px,
-          #e7b576 calc(100% - 6px),
-          transparent calc(100% - 6px),
-          transparent calc(100% - 2px),
-          #cecece calc(100% - 2px)
-        )
-        2;
-      border-image-outset: 0 4px 0 0;
-
-      &.col-center {
-        text-align: center;
+        &.col-center {
+          text-align: center;
+        }
       }
-    }
-
-    .bor-r {
-      border-right: 2px solid transparent;
-      border-bottom-width: 1px;
-      border-image: linear-gradient(
-          transparent 6px,
-          #e7b576 6px,
-          #e7b576 calc(100% - 6px),
-          transparent calc(100% - 6px),
-          transparent calc(100% - 2px),
-          #cecece calc(100% - 2px)
-        )
-        2;
-      border-image-outset: 0 0 0 4px;
-    }
 
-    .bor-c {
-      border-left: 2px solid transparent;
-      border-right: 2px solid transparent;
-      border-image: repeating-linear-gradient(
-          transparent,
-          transparent 3px,
-          #cecece 3px,
-          #cecece 7px,
-          transparent 7px
-        )
-        2;
-      border-image-outset: 0 4px 0 4px;
-      position: relative;
+      &:not(:last-child) {
+        position: relative;
+        // 用 ::after 模拟中间边框
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: calc(100% + 2px);
+          width: 2px;
+          height: 100%;
+          display: inline-block;
+          background: repeating-linear-gradient(
+            transparent,
+            transparent 3px,
+            #cecece 3px,
+            #cecece 7px,
+            transparent 7px
+          );
+        }
+      }
 
-      &::after {
+      // 中间的底部边框用 ::before 模拟
+      &:not(:first-child):not(:last-child)::before {
         content: "";
         position: absolute;
         top: 100%;
@@ -363,8 +341,31 @@ export default {
         height: 1px;
         display: inline-block;
         background-color: #cecece;
-        box-shadow: 5px 0 #cecece, -5px 0 #cecece;
+        box-shadow: 2px 0 #cecece, -2px 0 #cecece;
       }
+
+      &:last-child {
+        border-right: 2px solid transparent;
+        border-bottom-width: 1px;
+        border-image: linear-gradient(
+            transparent 6px,
+            #e7b576 6px,
+            #e7b576 calc(100% - 6px),
+            transparent calc(100% - 6px),
+            transparent calc(100% - 2px),
+            #cecece calc(100% - 2px)
+          )
+          2;
+        border-image-outset: 0 0 0 4px;
+      }
+    }
+
+    .pinyin {
+      font-family: "GB-PINYINOK-B";
+    }
+
+    .chs {
+      font-family: "FZJCGFKTK";
     }
   }
 }

src/components/Adult/preview/VoiceMatrix.vue

@@ -836,7 +836,6 @@ export default {
       });
     },
     handleWav(list, tmIndex = 0) {
-      console.log(list);
       this.$set(this.curQue.Bookanswer, "recordList", list);
     },
   },