表格题型改进

src/components/Adult/inputModules/ConfigurableTable/components/CellEdit.vue

@@ -6,15 +6,33 @@
     :close-on-click-modal="false"
     :modal="false"
   >
-    <label>内容类型：</label>
-    <el-select v-model="cellData.type">
-      <el-option
-        v-for="{ value, label } in cellTypeList"
-        :key="value"
-        :label="label"
-        :value="value"
-      />
-    </el-select>
+    <el-form :model="cellData" :inline="true">
+      <el-form-item label="下划线">
+        <el-switch v-model="cellData.isUnderline" />
+      </el-form-item>
+      <el-form-item label="背景色">
+        <el-color-picker v-model="cellData.background" />
+      </el-form-item>
+      <el-form-item label="勾叉">
+        <el-switch v-model="cellData.isCross" />
+      </el-form-item>
+      <el-form-item label="合并行">
+        <el-input v-model="cellData.rowspan" class="rowspan" type="number" />
+      </el-form-item>
+      <el-form-item label="合并列">
+        <el-input v-model="cellData.colspan" class="colspan" type="number" />
+      </el-form-item>
+      <el-form-item label="内容类型">
+        <el-select v-model="cellData.type">
+          <el-option
+            v-for="{ value, label } in cellTypeList"
+            :key="value"
+            :label="label"
+            :value="value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
     <div class="dialog-container">
       <el-input v-if="cellData.type === 'content'" v-model="cellData.text" />
 
@@ -73,47 +91,47 @@ export default {
   props: {
     visible: {
       type: Boolean,
-      required: true
+      required: true,
     },
     body: {
       type: Array,
-      required: true
+      required: true,
     },
     curIndex: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       cellTypeList: [
         {
           label: "内容",
-          value: "content"
+          value: "content",
         },
         {
           label: "前缀 + 内容",
-          value: "preContent"
+          value: "preContent",
         },
         {
           label: "拼音",
-          value: "pinyin"
+          value: "pinyin",
         },
         {
-          label: '中文 + 英文 + 拼音',
-          value: 'twoAnnotation'
+          label: "中文 + 英文 + 拼音",
+          value: "twoAnnotation",
         },
         {
-          label: '前缀 + 拼音',
-          value: 'prePinyin'
-        }
-      ]
+          label: "前缀 + 拼音",
+          value: "prePinyin",
+        },
+      ],
     };
   },
   computed: {
     cellData() {
       return this.body[this.curIndex.row].content[this.curIndex.col];
-    }
+    },
   },
   methods: {
     close() {
@@ -122,8 +140,8 @@ export default {
 
     confirm() {
       this.$emit("close");
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -131,6 +149,13 @@ export default {
 ::v-deep .dialog-container {
   margin-top: 12px;
 }
+
+::v-deep .el-form {
+  .colspan,
+  .rowspan {
+    width: 70px;
+  }
+}
 </style>
 
 <style lang="scss">

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

@@ -55,14 +55,30 @@
         <thead>
           <tr v-for="(item, i) in curQue.tableData.headers" :key="i">
             <th v-for="(header, j) in item.content" :key="j">
-              <el-input v-model="header.text" />
+              <el-form :inline="true" :model="header">
+                <el-form-item label="内容">
+                  <el-input v-model="header.text" class="text" />
+                </el-form-item>
+                <el-form-item label="合并行">
+                  <el-input
+                    v-model="header.rowspan"
+                    class="rowspan"
+                    type="number"
+                  />
+                </el-form-item>
+                <el-form-item label="合并列">
+                  <el-input
+                    v-model="header.colspan"
+                    class="colspan"
+                    type="number"
+                  />
+                </el-form-item>
+              </el-form>
             </th>
             <th>
-              <el-switch v-model="item.isMerge" active-text="合并" />
-              <el-button
-                size="mini"
-                @click="deleteThead(i)"
-              >删除表头</el-button>
+              <el-button size="mini" @click="deleteThead(i)">
+                删除表头
+              </el-button>
             </th>
           </tr>
         </thead>
@@ -115,7 +131,7 @@ export default {
           isShadow: false,
           isTitle: false,
           marginHighlight: false,
-          pinyinPosition: 'top',
+          pinyinPosition: "top",
           title: "",
           textAlign: "center",
           headerBgColor: "#fff",
@@ -128,6 +144,11 @@ export default {
                     type: "content",
                     text: "",
                     prefix: "",
+                    isUnderline: false,
+                    background: "#fff",
+                    isCross: false,
+                    rowspan: 1,
+                    colspan: 1,
                     sentence_data: {
                       type: "sentence_segword_chs",
                       name: "句子分词",
@@ -135,32 +156,32 @@ export default {
                       sentence: "", // 句子
                       segList: [], // 分词结果
                       seg_words: "",
-                      wordsList: []
-                    }
-                  }
-                ]
-              }
+                      wordsList: [],
+                    },
+                  },
+                ],
+              },
             ],
             colsConfig: {
-              width: [{ val: 100 }]
-            }
-          }
+              width: [{ val: 100 }],
+            },
+          },
         };
-      }
+      },
     },
     changeCurQue: {
       type: Function,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       visible: false,
       curIndex: {
         col: 0,
-        row: 0
+        row: 0,
       },
-      predefineColors: ["#f6d5a4", "#efeff9", "#e2e1c8"]
+      predefineColors: ["#f6d5a4", "#efeff9", "#e2e1c8"],
     };
   },
   computed: {
@@ -170,7 +191,7 @@ export default {
     cols() {
       if (this.rows.length <= 0) return 0;
       return this.curQue.tableData.body[0].content.length;
-    }
+    },
   },
   created() {
     if (this.curQue.isFirst) {
@@ -182,7 +203,7 @@ export default {
     edit(i, j) {
       this.curIndex = {
         col: j,
-        row: i
+        row: i,
       };
       this.visible = true;
     },
@@ -196,12 +217,14 @@ export default {
       let content = [];
       for (let i = 0; i < this.cols; i++) {
         content.push({
-          text: ""
+          text: "",
+          rowspan: 1,
+          colspan: 1,
         });
       }
       this.curQue.tableData.headers.push({
         isMerge: false,
-        content
+        content,
       });
     },
     deleteThead(i) {
@@ -214,6 +237,11 @@ export default {
           type: "content",
           text: "",
           prefix: "",
+          isUnderline: false,
+          background: "#fff",
+          isCross: false,
+          rowspan: 1,
+          colspan: 1,
           sentence_data: {
             type: "sentence_segword_chs",
             name: "句子分词",
@@ -221,13 +249,15 @@ export default {
             sentence: "", // 句子
             segList: [], // 分词结果
             seg_words: "",
-            wordsList: []
-          }
+            wordsList: [],
+          },
         });
       });
       this.curQue.tableData.headers.forEach(({ content }) => {
         content.push({
-          text: ""
+          text: "",
+          rowspan: 1,
+          colspan: 1,
         });
       });
       this.curQue.tableData.colsConfig.width.push({ val: 100 });
@@ -237,17 +267,16 @@ export default {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
-      })
-        .then(() => {
-          if (this.cols <= 1) return this.$message.warning("必须留一列");
-          this.curQue.tableData.body.forEach(({ content }) => {
-            content.splice(k, 1);
-          });
-          this.curQue.tableData.headers.forEach(({ content }) => {
-            content.splice(k, 1);
-          });
-          this.curQue.tableData.colsConfig.width.splice(k, 1);
+      }).then(() => {
+        if (this.cols <= 1) return this.$message.warning("必须留一列");
+        this.curQue.tableData.body.forEach(({ content }) => {
+          content.splice(k, 1);
+        });
+        this.curQue.tableData.headers.forEach(({ content }) => {
+          content.splice(k, 1);
         });
+        this.curQue.tableData.colsConfig.width.splice(k, 1);
+      });
     },
 
     addRow() {
@@ -257,6 +286,11 @@ export default {
           type: "content",
           text: "",
           prefix: "",
+          isUnderline: false,
+          background: "#fff",
+          isCross: false,
+          rowspan: 1,
+          colspan: 1,
           sentence_data: {
             type: "sentence_segword_chs",
             name: "句子分词",
@@ -264,12 +298,12 @@ export default {
             sentence: "", // 句子
             segList: [], // 分词结果
             seg_words: "",
-            wordsList: []
-          }
+            wordsList: [],
+          },
         });
       }
       this.curQue.tableData.body.push({
-        content
+        content,
       });
     },
     deleteRow(i) {
@@ -277,13 +311,12 @@ export default {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
-      })
-        .then(() => {
-          if (this.rows <= 1) return this.$message.warning("必须留一行");
-          this.curQue.tableData.body.splice(i, 1);
-        });
-    }
-  }
+      }).then(() => {
+        if (this.rows <= 1) return this.$message.warning("必须留一行");
+        this.curQue.tableData.body.splice(i, 1);
+      });
+    },
+  },
 };
 </script>
 
@@ -317,6 +350,11 @@ export default {
 
       th {
         border: 1px solid #aaa;
+
+        .rowspan,
+        .colspan {
+          width: 70px;
+        }
       }
     }
   }

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

@@ -128,9 +128,6 @@ export default {
     width: 80px;
   }
 }
-::v-deep .set-up {
-  margin-bottom: 8px;
-}
 
 ::v-deep .el-form {
   .colspan,

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

@@ -50,7 +50,14 @@
                 <template slot="prepend">文本</template>
               </el-input>
               <el-input v-model="num.english">
-                <template slot="prepend">英文</template>
+                <el-select
+                  slot="prepend"
+                  v-model="num.type"
+                  placeholder="请选择"
+                >
+                  <el-option label="英文" value="english" />
+                  <el-option label="拼音" value="pinyin" />
+                </el-select>
               </el-input>
             </th>
           </tr>
@@ -109,14 +116,17 @@ export default {
             headers: [
               {
                 text: "",
+                type: "english",
                 english: "",
               },
               {
                 text: "",
+                type: "english",
                 english: "",
               },
               {
                 text: "",
+                type: "english",
                 english: "",
               },
             ],
@@ -248,6 +258,7 @@ export default {
       });
       this.curQue.tableData.headers.push({
         text: "",
+        type: "english",
         english: "",
       });
       this.curQue.tableData.colsConfig.width.push({ val: 100 });
@@ -338,6 +349,12 @@ export default {
     .preview-table {
       border-collapse: collapse;
 
+      th {
+        .el-select {
+          width: 80px;
+        }
+      }
+
       td,
       th {
         padding: 8px;

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

@@ -128,7 +128,7 @@ export default {
       this.fileCon.img_list = JSON.parse(JSON.stringify(this.curQue.img_list));
       this.fileCon.mp3_list = JSON.parse(JSON.stringify(this.curQue.mp3_list));
     } else {
-      //this.initCurQueData();
+      // this.initCurQueData();
     }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
@@ -218,7 +218,7 @@ export default {
   }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 p {
   margin: 0;

src/components/Adult/preview/ConfigurableTable.vue

@@ -10,10 +10,10 @@
     >
       <colgroup>
         <col
-          v-for="(item, i) in curQue.tableData.colsConfig.width"
+          v-for="(col, i) in curQue.tableData.colsConfig.width"
           :key="`col-${i}`"
-          :style="{ width: `${item.val}px` }"
-        >
+          :style="{ width: `${col.val}px` }"
+        />
       </colgroup>
 
       <caption v-if="curQue.isTitle">
@@ -24,24 +24,20 @@
 
       <thead>
         <tr
-          v-for="(header, i) in curQue.tableData.headers"
+          v-for="({ content }, i) in curQue.tableData.headers"
           :key="`thead-${i}`"
           :style="{
             'background-color': `${curQue.headerBgColor}`,
           }"
         >
-          <template v-if="header.isMerge">
-            <th :colspan="header.content.length">
-              <div class="thead-merge">
-                <span v-for="(item, j) in header.content" :key="`th-${i}-${j}`">
-                  {{ item.text }}
-                </span>
-              </div>
-            </th>
-          </template>
-          <template v-else>
-            <th v-for="(item, j) in header.content" :key="`th-${i}-${j}`">
-              {{ item.text }}
+          <template v-for="({ text, colspan, rowspan }, j) in content">
+            <th
+              v-if="thIsShow(i, j)"
+              :key="`th-${i}-${j}`"
+              :colspan="colspan"
+              :rowspan="rowspan"
+            >
+              {{ text }}
             </th>
           </template>
         </tr>
@@ -52,145 +48,163 @@
           'text-align': `${curQue.textAlign}`,
         }"
       >
-        <tr v-for="(data, i) in curQue.tableData.body" :key="`tr-${i}`">
-          <td v-for="(item, j) in data.content" :key="`td-${i}-${j}`">
-            <template v-if="item.type === 'content'">
-              <template v-if="item.text.length > 0">
-                {{ item.text }}
-              </template>
-              <template v-else>
-                <el-input
-                  v-model="item.answer"
-                  type="textarea"
-                  :placeholder="`${isAnswerMode ? '' : '输入'}`"
-                  :disabled="isAnswerMode"
-                  :autosize="{ minRows: 1, maxRows: 6 }"
-                  @input="enterAnswer(i, j, $event)"
-                />
-              </template>
-            </template>
+        <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
+          <template v-for="(col, j) in row.content">
+            <td
+              v-if="tdIsShow(i, j)"
+              :key="`td-${i}-${j}`"
+              :colspan="col.colspan"
+              :rowspan="col.rowspan"
+              :class="[{ underline: col.isUnderline }]"
+              :style="{ 'background-color': `${col.background}` }"
+            >
+              <div class="cell-wrap">
+                <template v-if="col.type === 'content'">
+                  <span v-if="col.text.length > 0" class="content">
+                    {{ col.text }}
+                  </span>
+                  <template v-else>
+                    <el-input
+                      v-model="col.answer"
+                      type="textarea"
+                      :placeholder="`${isAnswerMode ? '' : '输入'}`"
+                      :disabled="isAnswerMode"
+                      :autosize="{ minRows: 1, maxRows: 6 }"
+                      @input="enterAnswer(i, j, $event)"
+                    />
+                  </template>
+                </template>
 
-            <div v-else-if="item.type === 'preContent'" class="preContent">
-              <span>{{ item.prefix }}</span>
-              <template v-if="item.text.length > 0">
-                {{ item.text }}
-              </template>
-              <template v-else>
-                <el-input
-                  v-model="item.answer"
-                  type="textarea"
-                  :placeholder="`${isAnswerMode ? '' : '输入'}`"
-                  :disabled="isAnswerMode"
-                  :autosize="{ minRows: 1, maxRows: 6 }"
-                  @input="enterAnswer(i, j, $event)"
-                />
-              </template>
-            </div>
+                <div v-else-if="col.type === 'preContent'" class="preContent">
+                  <span>{{ col.prefix }}</span>
+                  <template v-if="col.text.length > 0">
+                    {{ col.text }}
+                  </template>
+                  <template v-else>
+                    <el-input
+                      v-model="col.answer"
+                      type="textarea"
+                      :placeholder="`${isAnswerMode ? '' : '输入'}`"
+                      :disabled="isAnswerMode"
+                      :autosize="{ minRows: 1, maxRows: 6 }"
+                      @input="enterAnswer(i, j, $event)"
+                    />
+                  </template>
+                </div>
 
-            <div
-              v-else-if="
-                item.type === 'pinyin' || item.type === 'twoAnnotation'
-              "
-              class="sentence"
-              :style="pinyinStyle"
-            >
-              <div>
-                <span
-                  v-for="({ pinyin, chs }, k) in item.sentence_data.wordsList"
-                  :key="`${
-                    curQue.pinyinPosition === 'top' ||
-                    curQue.pinyinPosition === 'left'
-                      ? 'pinyin'
-                      : 'chs'
-                  }-${k}`"
-                  :class="[
-                    `${
-                      curQue.pinyinPosition === 'top' ||
-                      curQue.pinyinPosition === 'left'
-                        ? 'pinyin'
-                        : 'chs'
-                    }`,
-                  ]"
-                >
-                  {{
-                    curQue.pinyinPosition === "top" ||
-                      curQue.pinyinPosition == "left"
-                      ? pinyin
-                      : chs
-                  }}
-                </span>
-                <span
-                  v-if="
-                    item.type === 'twoAnnotation' &&
-                      (curQue.pinyinPosition === 'right' ||
-                        curQue.pinyinPosition === 'bottom')
+                <div
+                  v-else-if="
+                    col.type === 'pinyin' || col.type === 'twoAnnotation'
                   "
-                  class="english"
+                  class="sentence"
+                  :style="pinyinStyle"
                 >
-                  ({{ item.text }})
-                </span>
-              </div>
-              <div>
-                <span
-                  v-for="({ pinyin, chs }, k) in item.sentence_data.wordsList"
-                  :key="`${
-                    curQue.pinyinPosition === 'top' ||
-                    curQue.pinyinPosition === 'left'
-                      ? 'chs'
-                      : 'pinyin'
-                  }-${k}`"
-                  :class="[
-                    `${
-                      curQue.pinyinPosition === 'top' ||
-                      curQue.pinyinPosition === 'left'
-                        ? 'chs'
-                        : 'pinyin'
-                    }`,
-                  ]"
-                >
-                  {{
-                    curQue.pinyinPosition === "top" ||
-                      curQue.pinyinPosition == "left"
-                      ? chs
-                      : pinyin
-                  }}
-                </span>
-                <span
-                  v-if="
-                    item.type === 'twoAnnotation' &&
-                      (curQue.pinyinPosition === 'top' ||
-                        curQue.pinyinPosition === 'left')
-                  "
-                  class="english"
-                >
-                  ({{ item.text }})
-                </span>
-              </div>
-            </div>
-
-            <div v-else-if="item.type === 'prePinyin'" class="pre-pinyin">
-              <span>{{ item.prefix }}</span>
-              <div class="right-pinyin">
-                <div>
-                  <span
-                    v-for="({ pinyin }, k) in item.sentence_data.wordsList"
-                    :key="`pre-pinyin-${k}`"
-                    class="pinyin"
-                  >
-                    {{ pinyin }}
-                  </span>
+                  <div>
+                    <span
+                      v-for="({ pinyin, chs }, k) in col.sentence_data
+                        .wordsList"
+                      :key="`${
+                        curQue.pinyinPosition === 'top' ||
+                        curQue.pinyinPosition === 'left'
+                          ? 'pinyin'
+                          : 'chs'
+                      }-${k}`"
+                      :class="[
+                        `${
+                          curQue.pinyinPosition === 'top' ||
+                          curQue.pinyinPosition === 'left'
+                            ? 'pinyin'
+                            : 'chs'
+                        }`,
+                      ]"
+                    >
+                      {{
+                        curQue.pinyinPosition === "top" ||
+                        curQue.pinyinPosition == "left"
+                          ? pinyin
+                          : chs
+                      }}
+                    </span>
+                    <span
+                      v-if="
+                        col.type === 'twoAnnotation' &&
+                        (curQue.pinyinPosition === 'right' ||
+                          curQue.pinyinPosition === 'bottom')
+                      "
+                      class="english"
+                    >
+                      ({{ col.text }})
+                    </span>
+                  </div>
+                  <div>
+                    <span
+                      v-for="({ pinyin, chs }, k) in col.sentence_data
+                        .wordsList"
+                      :key="`${
+                        curQue.pinyinPosition === 'top' ||
+                        curQue.pinyinPosition === 'left'
+                          ? 'chs'
+                          : 'pinyin'
+                      }-${k}`"
+                      :class="[
+                        `${
+                          curQue.pinyinPosition === 'top' ||
+                          curQue.pinyinPosition === 'left'
+                            ? 'chs'
+                            : 'pinyin'
+                        }`,
+                      ]"
+                    >
+                      {{
+                        curQue.pinyinPosition === "top" ||
+                        curQue.pinyinPosition == "left"
+                          ? chs
+                          : pinyin
+                      }}
+                    </span>
+                    <span
+                      v-if="
+                        col.type === 'twoAnnotation' &&
+                        (curQue.pinyinPosition === 'top' ||
+                          curQue.pinyinPosition === 'left')
+                      "
+                      class="english"
+                    >
+                      ({{ col.text }})
+                    </span>
+                  </div>
                 </div>
-                <div>
-                  <span
-                    v-for="({ pinyin, chs }, k) in item.sentence_data.wordsList"
-                    :key="`pre-chs-${k}`"
+
+                <div v-else-if="col.type === 'prePinyin'" class="pre-pinyin">
+                  <span>{{ col.prefix }}</span>
+                  <div
+                    class="right-pinyin"
+                    :style="{
+                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`,
+                    }"
                   >
-                    {{ chs }}
-                  </span>
+                    <span
+                      v-for="({ pinyin }, k) in col.sentence_data.wordsList"
+                      :key="`pre-pinyin-${k}`"
+                      class="pinyin"
+                    >
+                      {{ pinyin }}
+                    </span>
+                    <span
+                      v-for="({ pinyin, chs }, k) in col.sentence_data
+                        .wordsList"
+                      :key="`pre-chs-${k}`"
+                      class="chs"
+                    >
+                      {{ chs }}
+                    </span>
+                  </div>
                 </div>
+
+                <CrossTick v-if="col.isCross" />
               </div>
-            </div>
-          </td>
+            </td>
+          </template>
         </tr>
       </tbody>
     </table>
@@ -198,7 +212,10 @@
 </template>
 
 <script>
+import CrossTick from "./HeaderSparate/CrossTick.vue";
+
 export default {
+  components: { CrossTick },
   props: {
     curQue: {
       type: Object,
@@ -262,6 +279,64 @@ export default {
         value,
       };
     },
+    // th 是否生成
+    thIsShow(i, j) {
+      let headers = this.curQue.tableData.headers;
+      let col = 1;
+      let colIndex = headers[i].content.findIndex(({ colspan }, index) => {
+        if (index > j) return false;
+        let num = colspan === undefined ? 1 : Number(colspan);
+        if (num > 1) {
+          col = num;
+          return false;
+        }
+        if (index === j && col > 1) return true;
+        if (col > 0) col -= 1;
+        return false;
+      });
+      let row = 1;
+      let rowIndex = headers.findIndex((item, index) => {
+        let rowspan = item.content[j].rowspan;
+        let num = rowspan === undefined ? 1 : Number(rowspan);
+        if (num > 1) {
+          row = num;
+          return false;
+        }
+        if (index === i && row > 1) return true;
+        if (row > 0) row -= 1;
+        return false;
+      });
+      return colIndex === -1 && rowIndex === -1;
+    },
+    // rowspan colspan 控制td是否生成
+    tdIsShow(i, j) {
+      let body = this.curQue.tableData.body;
+      let col = 1;
+      let colIndex = body[i].content.findIndex(({ colspan }, index) => {
+        if (index > j) return false;
+        let num = colspan === undefined ? 1 : Number(colspan);
+        if (num > 1) {
+          col = num;
+          return false;
+        }
+        if (index === j && col > 1) return true;
+        if (col > 0) col -= 1;
+        return false;
+      });
+      let row = 1;
+      let rowIndex = body.findIndex((item, index) => {
+        let rowspan = item.content[j].rowspan;
+        let num = rowspan === undefined ? 1 : Number(rowspan);
+        if (num > 1) {
+          row = num;
+          return false;
+        }
+        if (index === i && row > 1) return true;
+        if (row > 0) row -= 1;
+        return false;
+      });
+      return colIndex === -1 && rowIndex === -1;
+    },
   },
 };
 </script>
@@ -284,6 +359,10 @@ export default {
       line-height: 1.95;
     }
 
+    th {
+      font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
+    }
+
     th,
     td {
       font-weight: normal;
@@ -297,6 +376,7 @@ export default {
     }
 
     .preContent {
+      font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
       display: flex;
       align-items: center;
 
@@ -306,10 +386,28 @@ export default {
     }
 
     td {
+      // min-height: 51px;
+      // height: 51px;
+
+      .cell-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .content {
+          font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
+        }
+      }
+
+      .content {
+        font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
+      }
+
       .sentence {
         display: flex;
 
         .english {
+          font-family: "robot";
           opacity: 0.6;
         }
       }
@@ -322,16 +420,22 @@ export default {
       .chs {
         font-family: "FZJCGFKTK";
       }
+
+      // 下划线
+      &.underline {
+        text-decoration: underline;
+      }
+
       // 前缀 + 拼音
       .pre-pinyin {
         display: flex;
         align-items: flex-end;
 
         .right-pinyin {
-          row-gap: 2px;
-          flex-direction: column;
+          margin-left: 4px;
+          column-gap: 2px;
           text-align: center;
-          display: flex;
+          display: grid;
         }
       }
     }

src/components/Adult/preview/HeaderSparate/index.vue

@@ -12,12 +12,14 @@
       <thead>
         <tr>
           <th
-            v-for="({ text, english }, i) in curQue.tableData.headers"
+            v-for="({ text, english, type }, i) in curQue.tableData.headers"
             :key="`th-${i}`"
           >
             <div class="thead-content" :style="theadStyle">
-              <span class="chs">{{ text }}</span
-              ><span class="english">{{ english }}</span>
+              <span class="chs">{{ text }}</span>
+              <span :class="[type === 'english' ? 'english' : 'pinyin']">
+                {{ english }}
+              </span>
             </div>
           </th>
         </tr>
@@ -134,7 +136,7 @@
                   <div
                     class="right-pinyin"
                     :style="{
-                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, 1fr)`,
+                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`,
                     }"
                   >
                     <span
@@ -261,6 +263,18 @@ export default {
     tdHeaderIsNone(i, j) {
       let body = this.curQue.tableData.body;
       if (j !== 0 && j !== body[0].content.length - 1) return "table-cell";
+      let col = 1;
+      let colIndex = body[i].content.findIndex(({ colspan }, index) => {
+        if (index > j) return false;
+        let num = colspan === undefined ? 1 : Number(colspan);
+        if (num > 1) {
+          col = num;
+          return false;
+        }
+        if (index === j && col > 1) return true;
+        if (col > 0) col -= 1;
+        return false;
+      });
       let row = 1;
       let rowIndex = body.findIndex((item, index) => {
         let rowspan = item.content[j].rowspan;
@@ -273,12 +287,12 @@ export default {
         if (row > 0) row -= 1;
         return false;
       });
-      return rowIndex === -1 ? "table-cell" : "none";
+      return rowIndex === -1 && colIndex === -1 ? "table-cell" : "none";
     },
-    // rowspan colspan 控制td是否生成，头尾td必生成，样式兼容
+    // rowspan colspan 控制td是否生成
     tdIsShow(i, j) {
       let body = this.curQue.tableData.body;
-      if (j === 0 || j === body[0].content.length - 1) return true;
+      if (j === 0) return true;
       let col = 1;
       let colIndex = body[i].content.findIndex(({ colspan }, index) => {
         if (index > j) return false;
@@ -303,7 +317,9 @@ export default {
         if (row > 0) row -= 1;
         return false;
       });
-      return colIndex === -1 && rowIndex === -1;
+      return (
+        colIndex === -1 && (rowIndex === -1 || j === body[0].content.length - 1)
+      );
     },
   },
 };
@@ -332,7 +348,7 @@ export default {
         justify-content: center;
 
         .english {
-          font-family: "robot", "GB-PINYINOK-B";
+          font-family: "robot";
           color: #000;
         }
       }
@@ -342,7 +358,8 @@ export default {
       color: #474747;
       border-bottom: 1px solid transparent;
       padding: 4px 12px;
-      min-height: 28px;
+      min-height: 43px;
+      height: 43px;
 
       .cell-wrap {
         display: flex;
@@ -369,7 +386,8 @@ export default {
         align-items: flex-end;
 
         .right-pinyin {
-          row-gap: 2px;
+          margin-left: 4px;
+          column-gap: 2px;
           text-align: center;
           display: grid;
         }