判断每列是否有内容去判断是否显示整列

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -750,7 +750,7 @@
                       >
                         <div class="NPC-word-tab-box">
                           <span
-                            v-if="data.property.pinyin_position == 'top' && showObj.pinyin"
+                            v-if="data.property.pinyin_position == 'top' && showObj.pinyin && colHasContent[0]"
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
@@ -773,13 +773,13 @@
                                   ? data.unified_attrib.font_size
                                   : '',
                             }"
-                            v-if="showObj.newWord"
+                            v-if="showObj.newWord && colHasContent[1]"
                             class="NPC-word-tab-common NPC-word-tab-word"
                             v-html="convertText(sanitizeHTML(sItem.new_word))"
                           >
                           </span>
                           <span
-                            v-if="data.property.pinyin_position == 'bottom' && showObj.pinyin"
+                            v-if="data.property.pinyin_position == 'bottom' && showObj.pinyin && colHasContent[0]"
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
@@ -798,7 +798,8 @@
                               multilingualTextList[getLang()] &&
                               multilingualTextList[getLang()][index] &&
                               multilingualTextList[getLang()][index][0] &&
-                              showObj.newWord
+                              showObj.newWord &&
+                              colHasContent[1]
                             "
                             class="NPC-word-tab-common"
                             :style="{
@@ -814,7 +815,7 @@
                             width: data.col_width[2].value + 'px',
                             flex: !data.col_width[2].value || data.col_width[2].value === '0' ? '1' : '',
                           }"
-                          v-if="showObj.cixing"
+                          v-if="showObj.cixing && colHasContent[2]"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
@@ -844,7 +845,7 @@
                             width: data.col_width[3].value + 'px',
                             flex: !data.col_width[3].value || data.col_width[3].value === '0' ? '1' : '',
                           }"
-                          v-if="showObj.shiyi"
+                          v-if="showObj.shiyi && colHasContent[3]"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
@@ -873,7 +874,8 @@
                         <span
                           v-if="
                             (!data.property.pinyin_position || data.property.pinyin_position == 'front') &&
-                            showObj.pinyin
+                            showObj.pinyin &&
+                            colHasContent[0]
                           "
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
@@ -896,7 +898,7 @@
                             width: data.col_width[0].value + 'px',
                             flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                           }"
-                          v-if="showObj.newWord"
+                          v-if="showObj.newWord && colHasContent[1]"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-word"
@@ -925,7 +927,7 @@
                           </span>
                         </span>
                         <span
-                          v-if="data.property.pinyin_position == 'back' && showObj.pinyin"
+                          v-if="data.property.pinyin_position == 'back' && showObj.pinyin && colHasContent[0]"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
@@ -947,7 +949,7 @@
                             width: data.col_width[2].value + 'px',
                             flex: !data.col_width[2].value || data.col_width[2].value === '0' ? '1' : '',
                           }"
-                          v-if="showObj.cixing"
+                          v-if="showObj.cixing && colHasContent[2]"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
@@ -978,7 +980,7 @@
                             width: data.col_width[3].value + 'px',
                             flex: !data.col_width[3].value || data.col_width[3].value === '0' ? '1' : '',
                           }"
-                          v-if="showObj.shiyi"
+                          v-if="showObj.shiyi && colHasContent[3]"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
@@ -1024,13 +1026,13 @@
                       </div>
 
                       <div
-                        v-if="sItem.collocation && showObj.collocation"
+                        v-if="showObj.collocation && colHasContent[4]"
                         :style="{
                           width: data.col_width[4].value + 'px',
                           flex: !data.col_width[4].value || data.col_width[4].value === '0' ? '1' : '',
                         }"
                       >
-                        <span class="collocation"
+                        <span class="collocation" v-if="sItem.collocation"
                           ><span>{{ convertText('搭配：') }}</span
                           ><b
                             v-html="convertText(sanitizeHTML(sItem.collocation))"
@@ -1053,13 +1055,13 @@
                         </span>
                       </div>
                       <div
-                        v-if="sItem.liju_list && showObj.liju"
+                        v-if="showObj.liju && colHasContent[5]"
                         :style="{
                           width: data.col_width[5].value + 'px',
                           flex: !data.col_width[5].value || data.col_width[5].value === '0' ? '1' : '',
                         }"
                       >
-                        <span class="collocation"
+                        <span class="collocation" v-if="sItem.liju_list"
                           ><span>{{ convertText('例句：') }}</span>
                           <div>
                             <b
@@ -1496,6 +1498,7 @@ export default {
         collocation: true,
         liju: true,
       },
+      colHasContent: [],
     };
   },
   computed: {
@@ -1709,6 +1712,7 @@ export default {
     initData() {
       this.hasVoice = false;
       this.rowWidth = 0;
+      this.colHasContent = [];
       this.data.col_width.forEach((item, index) => {
         if (
           this.data.property.pinyin_position &&
@@ -1788,6 +1792,21 @@ export default {
       });
       this.optionRes = JSON.parse(JSON.stringify(optionRes));
       this.$set(this.data, 'option_list', option_list);
+      // 判断每列是否有内容
+      let pinyin_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.pinyin}`, '');
+      let new_word_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.new_word}`, '');
+      let cixing_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.cixing}`, '');
+      let def_str_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.def_str}`, '');
+      let collocation_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.collocation}`, '');
+      let liju_list_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.liju_list}`, '');
+      this.colHasContent = [
+        pinyin_col ? true : false,
+        new_word_col ? true : false,
+        cixing_col ? true : false,
+        def_str_col ? true : false,
+        collocation_col ? true : false,
+        liju_list_col ? true : false,
+      ];
       if (!this.isJudgingRightWrong) {
         this.answer.answer_list = Bookanswer;
       }