合并单元格

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

@@ -21,7 +21,10 @@
           <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,
@@ -263,7 +266,10 @@
             <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 +580,7 @@ export default {
   },
   created() {
     this.handleData();
+    this.computedTableCellShow();
   },
   methods: {
     toggle(status) {
@@ -613,6 +620,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 =