Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -10,18 +10,17 @@
           width: isMobile ? '100%' : data.property.width + 'px',
         }"
       >
-        <table
-          :style="{
-            width: '100%',
-          }"
-        >
+        <table style="width: 100%; table-layout: fixed">
           <colgroup>
             <col v-for="(item, i) in data.col_width" :key="`col-${i}`" :style="{ width: `${item.value}%` }" />
           </colgroup>
           <tr v-for="(row, i) in data.option_list" :key="`tr-${i}`" :style="{ height: data.property.height + 'px' }">
             <template v-for="(col, j) in row">
               <td
+                v-if="col.is_show_cell"
                 :key="col.mark"
+                :colspan="col.cell.colspan"
+                :rowspan="col.cell.rowspan"
                 :style="{
                   borderTop: i === 0 ? '1px solid ' + data.property.border_color : '',
                   borderBottom: '1px solid ' + data.property.border_color,
@@ -252,18 +251,17 @@
             height: data.property.height + 'px',
           }"
         >
-          <table
-            :style="{
-              width: '100%',
-            }"
-          >
+          <table style="width: 100%; table-layout: fixed">
             <colgroup>
               <col v-for="(item, i) in data.col_width" :key="`col-${i}`" :style="{ width: `${item.value}%` }" />
             </colgroup>
             <tr v-for="(row, i) in data.option_list" :key="`tr-${i}`" :style="{ height: data.property.height + 'px' }">
               <template v-for="(col, j) in row">
                 <td
+                  v-if="col.is_show_cell"
                   :key="col.mark"
+                  :colspan="col.colspan"
+                  :rowspan="col.rowspan"
                   :style="{
                     borderTop: i === 0 ? '1px solid ' + data.property.border_color : '',
                     borderBottom: '1px solid ' + data.property.border_color,
@@ -574,6 +572,7 @@ export default {
   },
   created() {
     this.handleData();
+    this.computedTableCellShow();
   },
   methods: {
     toggle(status) {
@@ -613,6 +612,38 @@ export default {
         });
       });
     },
+    // 计算单元格是否显示
+    computedTableCellShow() {
+      this.data.option_list.forEach((item, i, arr) => {
+        item.forEach(({ cell, is_show_cell }, j, arr2) => {
+          let col = cell.colspan === undefined ? 1 : Number(cell.colspan);
+          let row = cell.rowspan === undefined ? 1 : Number(cell.rowspan);
+
+          if (col > 1 && row === 1) {
+            for (let k = 1; k < col; k++) {
+              this.$set(arr[i][j + k], 'is_show_cell', false);
+            }
+          }
+          if (row > 1 && col === 1) {
+            for (let k = 1; k < row; k++) {
+              this.$set(arr[i + k][j], 'is_show_cell', false);
+            }
+          }
+          if (row > 1 && col > 1) {
+            for (let k = 1; k < row; k++) {
+              this.$set(arr[i + k][j], 'is_show_cell', false);
+              for (let l = 1; l < col; l++) {
+                this.$set(arr[i + k][j + l], 'is_show_cell', false);
+                this.$set(arr[i][j + l], 'is_show_cell', false);
+              }
+            }
+          }
+          if (is_show_cell === undefined) {
+            arr2[j].is_show_cell = true;
+          }
+        });
+      });
+    },
     computedAnswerText(item, i, j) {
       if (!this.isShowRightAnswer) return '';
       let answerOption =