移动端可配置表格

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

@@ -9,7 +9,7 @@
           curQue.tableData.colsConfig.width.length > 5
             ? width_total + 'px'
             : '',
-        fontSize: baseSizePhone + 2 + 'px',
+        fontSize: baseSizePhone + 2 + 'px'
       }"
     >
       <colgroup>
@@ -17,7 +17,7 @@
           v-for="(item, i) in curQue.tableData.colsConfig.width"
           :key="`col-${i}`"
           :style="{
-            width: `${item.val}px`,
+            width: `${item.val}px`
           }"
         />
       </colgroup>
@@ -40,7 +40,7 @@
 
       <tbody
         :style="{
-          'text-align': `${curQue.textAlign}`,
+          'text-align': `${curQue.textAlign}`
         }"
       >
         <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
@@ -61,7 +61,7 @@
                       ? 'correct'
                       : 'error'
                     : ''
-                  : '',
+                  : ''
               ]"
               :style="{
                 'background-color':
@@ -69,19 +69,21 @@
                   `${col.background}` === '#ffffff'
                     ? 'transparent'
                     : `${col.background}`,
-                display: tdHeaderIsNone(i, j),
+                display: tdHeaderIsNone(i, j)
               }"
             >
               <div
                 class="cell-wrap"
                 :class="[
                   col.isCross ? 'cell-wrap-between' : '',
-                  'cell-wrap-' + curQue.textAlign,
+                  'cell-wrap-' + curQue.textAlign
                 ]"
               >
                 <template v-if="col.type === 'content'">
                   <span v-if="col.text.length > 0" class="content">
-                    {{ col.text }}
+                    {{
+                      judgeAnswer === "standardAnswer" ? col.answer : col.text
+                    }}
                   </span>
                   <template v-else>
                     <el-input
@@ -99,8 +101,11 @@
                       @blur="
                         judgeAnswer == 'standardAnswer'
                           ? (col.answer = col.answer.trim())
-                          : (curQue.Bookanswer[i].content[j].answer =
-                              curQue.Bookanswer[i].content[j].answer.trim())
+                          : (curQue.Bookanswer[i].content[
+                              j
+                            ].answer = curQue.Bookanswer[i].content[
+                              j
+                            ].answer.trim())
                       "
                       @input="enterAnswer(i, j, 'input')"
                     />
@@ -116,19 +121,21 @@
                     <span
                       v-for="({ pinyin, chs }, k) in col.sentence_data
                         .wordsList"
-                      :key="`${
-                        curQue.pinyinPosition === 'top' ||
-                        curQue.pinyinPosition === 'left'
-                          ? 'pinyin'
-                          : 'chs'
-                      }-${k}`"
+                      :key="
+                        `${
+                          curQue.pinyinPosition === 'top' ||
+                          curQue.pinyinPosition === 'left'
+                            ? 'pinyin'
+                            : 'chs'
+                        }-${k}`
+                      "
                       :class="[
                         `${
                           curQue.pinyinPosition === 'top' ||
                           curQue.pinyinPosition === 'left'
                             ? 'pinyin'
                             : 'chs'
-                        }`,
+                        }`
                       ]"
                     >
                       {{
@@ -143,19 +150,21 @@
                     <span
                       v-for="({ pinyin, chs }, k) in col.sentence_data
                         .wordsList"
-                      :key="`${
-                        curQue.pinyinPosition === 'top' ||
-                        curQue.pinyinPosition === 'left'
-                          ? 'chs'
-                          : 'pinyin'
-                      }-${k}`"
+                      :key="
+                        `${
+                          curQue.pinyinPosition === 'top' ||
+                          curQue.pinyinPosition === 'left'
+                            ? 'chs'
+                            : 'pinyin'
+                        }-${k}`
+                      "
                       :class="[
                         `${
                           curQue.pinyinPosition === 'top' ||
                           curQue.pinyinPosition === 'left'
                             ? 'chs'
                             : 'pinyin'
-                        }`,
+                        }`
                       ]"
                     >
                       {{
@@ -172,7 +181,7 @@
                   v-else-if="col.type === 'prePinyin'"
                   :style="{
                     'flex-direction':
-                      col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse',
+                      col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse'
                   }"
                   class="pre-pinyin"
                 >
@@ -180,7 +189,7 @@
                   <div
                     class="right-pinyin"
                     :style="{
-                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`,
+                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`
                     }"
                   >
                     <span
@@ -218,7 +227,7 @@
                           paddingRight:
                             sddItem.config.wordPadding.indexOf('right') > -1
                               ? '4px'
-                              : '0px',
+                              : '0px'
                         }"
                       >
                         <!-- 补全句子 -->
@@ -238,8 +247,8 @@
                         <template
                           v-if="
                             sddItem.img_list &&
-                            sddItem.img_list.length > 0 &&
-                            sddItem.img_list[0].id
+                              sddItem.img_list.length > 0 &&
+                              sddItem.img_list[0].id
                           "
                         >
                           <img
@@ -283,32 +292,32 @@ export default {
   props: {
     curQue: {
       type: Object,
-      required: true,
+      required: true
     },
     themeColor: {
       type: String,
-      required: true,
+      required: true
     },
     judgeAnswer: {
-      type: String,
+      type: String
     },
     TaskModel: {
-      type: String,
+      type: String
     },
     baseSizePhone: {
-      type: Number,
-    },
+      type: Number
+    }
   },
   data() {
     return {
       isAnswerMode: false,
       userError: false,
       userAnswer: {
-        completeInput: [],
+        completeInput: []
       },
       userBookanswer: [],
       chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
-      width_total: 0, // 总宽度
+      width_total: 0 // 总宽度
     };
   },
   computed: {
@@ -316,24 +325,24 @@ export default {
       const hp = this.curQue.headerEnglishPosition;
       if (hp === "top") {
         return {
-          "flex-direction": "column-reverse",
+          "flex-direction": "column-reverse"
         };
       }
       if (hp === "right") {
         return {
           "flex-direction": "row",
-          "column-gap": "8px",
+          "column-gap": "8px"
         };
       }
       if (hp === "bottom") {
         return {
-          "flex-direction": "column",
+          "flex-direction": "column"
         };
       }
       if (hp === "left") {
         return {
           "flex-direction": "row-reverse",
-          "column-gap": "8px",
+          "column-gap": "8px"
         };
       }
     },
@@ -341,28 +350,28 @@ export default {
       let pyPos = this.curQue.pinyinPosition;
       if (pyPos === "left") {
         return {
-          "column-gap": "16px",
+          "column-gap": "16px"
         };
       }
 
       if (pyPos === "top") {
         return {
-          "flex-direction": "column",
+          "flex-direction": "column"
         };
       }
 
       if (pyPos === "right") {
         return {
-          "column-gap": "16px",
+          "column-gap": "16px"
         };
       }
 
       if (pyPos === "bottom") {
         return {
-          "flex-direction": "column",
+          "flex-direction": "column"
         };
       }
-    },
+    }
   },
   created() {
     if (this.judgeAnswer) {
@@ -374,14 +383,14 @@ export default {
       this.width_total = 0;
       this.curQue.tableData.body.forEach((item, i) => {
         arr.push({
-          content: [],
+          content: []
         });
-        item.content.forEach((items) => {
+        item.content.forEach(items => {
           if (items.type === "mulText") {
             flag = true;
           }
           arr[i].content.push({
-            answer: "",
+            answer: items.answer || "",
             CrossAnswer: "",
             userAnswerJudge:
               items.answer ||
@@ -389,19 +398,19 @@ export default {
                 items.CrossAnswer &&
                 items.CrossAnswer !== "normal")
                 ? "[JUDGE##F##JUDGE]"
-                : "",
+                : ""
           });
         });
       });
       if (!flag) {
         this.$set(this.curQue, "Bookanswer", arr);
       }
-      this.curQue.tableData.colsConfig.width.forEach((width) => {
+      this.curQue.tableData.colsConfig.width.forEach(width => {
         this.width_total += width.val;
       });
     } else {
-      this.curQue.Bookanswer.forEach((item) => {
-        item.content.forEach((item) => {
+      this.curQue.Bookanswer.forEach(item => {
+        item.content.forEach(item => {
           if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
             this.userError = true;
             return;
@@ -557,7 +566,7 @@ export default {
             items.mulText.detail.forEach((sdItem, sdIndex) => {
               let isHasPY = 0;
               let maxFontsize = 0;
-              sdItem.detail.forEach((sddItem) => {
+              sdItem.detail.forEach(sddItem => {
                 if (sddItem.wordsList.length > 0) {
                   sddItem.wordsList.forEach((sItem, sIndex) => {
                     let reg = /_{2,}/g;
@@ -588,7 +597,7 @@ export default {
                               bool || !complateArr[sItem.hengIndex]
                                 ? ""
                                 : "[JUDGE##F##JUDGE]",
-                            input_Isexample: Boolean(bool),
+                            input_Isexample: Boolean(bool)
                           };
                           Bookanswer[index].content[indexs].completeInput.push(
                             JSON.parse(JSON.stringify(obj))
@@ -696,8 +705,8 @@ export default {
       } else {
         sItem.isShow = true;
       }
-    },
-  },
+    }
+  }
 };
 </script>