生词表如果有列宽设为0或者空值，则均分剩余宽度

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

@@ -7,7 +7,7 @@
     />
 
     <main v-if="data" ref="newWordMain" class="main">
-      <div class="NPC-zhedie" :style="{ width: width }">
+      <div class="NPC-zhedie" :style="{ width: width + 'px' }">
         <!-- :style="{
             backgroundColor:
               data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -754,6 +754,7 @@
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.pinyin_size
                                   ? data.unified_attrib.pinyin_size
@@ -766,6 +767,7 @@
                           <span
                             :style="{
                               width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.font_size
                                   ? data.unified_attrib.font_size
@@ -781,6 +783,7 @@
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.pinyin_size
                                   ? data.unified_attrib.pinyin_size
@@ -798,12 +801,21 @@
                               showObj.newWord
                             "
                             class="NPC-word-tab-common"
-                            :style="{ width: data.col_width[0].value + 'px' }"
+                            :style="{
+                              width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
+                            }"
                           >
                             {{ multilingualTextList[getLang()][index][0] }}
                           </span>
                         </div>
-                        <span :style="{ width: data.col_width[2].value + 'px' }" v-if="showObj.cixing">
+                        <span
+                          :style="{
+                            width: data.col_width[2].value + 'px',
+                            flex: !data.col_width[2].value || data.col_width[2].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.cixing"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
                             :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -827,7 +839,13 @@
                             {{ multilingualTextList[getLang()][index][1] }}
                           </span>
                         </span>
-                        <span :style="{ width: data.col_width[3].value + 'px' }" v-if="showObj.shiyi">
+                        <span
+                          :style="{
+                            width: data.col_width[3].value + 'px',
+                            flex: !data.col_width[3].value || data.col_width[3].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.shiyi"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -860,6 +878,7 @@
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
+                            flex: !data.col_width[1].value || data.col_width[1].value === '0' ? '1' : '',
                             fontSize:
                               data.unified_attrib && data.unified_attrib.pinyin_size
                                 ? data.unified_attrib.pinyin_size
@@ -875,6 +894,7 @@
                         <span
                           :style="{
                             width: data.col_width[0].value + 'px',
+                            flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                           }"
                           v-if="showObj.newWord"
                         >
@@ -896,7 +916,10 @@
                               multilingualTextList[getLang()][index][0]
                             "
                             class="NPC-word-tab-common"
-                            :style="{ width: data.col_width[0].value + 'px' }"
+                            :style="{
+                              width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
+                            }"
                           >
                             {{ multilingualTextList[getLang()][index][0] }}
                           </span>
@@ -906,6 +929,7 @@
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
+                            flex: !data.col_width[1].value ? '1' || data.col_width[1].value === '0' : '',
                             fontSize:
                               data.unified_attrib && data.unified_attrib.pinyin_size
                                 ? data.unified_attrib.pinyin_size
@@ -918,7 +942,13 @@
                           v-html="sItem.pinyin"
                         >
                         </span>
-                        <span :style="{ width: data.col_width[2].value + 'px' }" v-if="showObj.cixing">
+                        <span
+                          :style="{
+                            width: data.col_width[2].value + 'px',
+                            flex: !data.col_width[2].value || data.col_width[2].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.cixing"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
                             :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -943,7 +973,13 @@
                             {{ multilingualTextList[getLang()][index][1] }}
                           </span>
                         </span>
-                        <span :style="{ width: data.col_width[3].value + 'px' }" v-if="showObj.shiyi">
+                        <span
+                          :style="{
+                            width: data.col_width[3].value + 'px',
+                            flex: !data.col_width[3].value || data.col_width[3].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.shiyi"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -989,7 +1025,10 @@
 
                       <div
                         v-if="sItem.collocation && showObj.collocation"
-                        :style="{ width: data.col_width[4].value + 'px' }"
+                        :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>{{ convertText('搭配：') }}</span
@@ -1013,7 +1052,13 @@
                           }}
                         </span>
                       </div>
-                      <div v-if="sItem.liju_list && showObj.liju" :style="{ width: data.col_width[5].value + 'px' }">
+                      <div
+                        v-if="sItem.liju_list && showObj.liju"
+                        :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>{{ convertText('例句：') }}</span>
                           <div>
@@ -1516,11 +1561,23 @@ export default {
         this.$emit('handleHeightChange', this.id, newVal ? this.dataHeight : height);
       });
     },
+    width: {
+      handler(val) {
+        if (val) {
+          // 如果有宽度为0且有内容的列，则行宽最小为撑满
+          if (this.rowWidth < this.width - 48) {
+            this.rowWidth = this.width - 48;
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   mounted() {
     this.$nextTick(() => {
       let totalWidth = document.querySelector('.newWord-preview').offsetWidth;
-      this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0)}px`;
+      this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0)}`;
     });
 
     this.dataHeight = this.$refs.previewContainer.style.height;
@@ -1544,6 +1601,10 @@ export default {
         }
       });
       this.rowWidth += 132;
+      // 如果有宽度为0且有内容的列，则行宽最小为撑满
+      if (this.rowWidth < this.width - 48) {
+        this.rowWidth = this.width - 48;
+      }
     },
     palyAudio(url, sIndex) {
       this.stopAudio();
@@ -1663,6 +1724,7 @@ export default {
         }
       });
       this.rowWidth += 132;
+
       this.is_change = true;
       setTimeout(() => {
         this.is_change = false;