表格行列背景色支持单独设置

src/views/book/courseware/create/components/question/table/Table.vue

@@ -106,6 +106,7 @@
       </div>
       <div class="option-list">
         <div v-for="(item, i) in data.option_list" :key="i" class="table-node">
+          <el-color-picker v-model="data.rows_bg_list[i]" />
           <div v-for="li in item" :key="li.mark" class="table-item">
             <!-- eslint-disable max-len -->
             <RichText
@@ -123,7 +124,9 @@
           </div>
         </div>
         <div class="table-node">
-          <div v-for="(value, index) in data.col_width" :key="index" class="table-item">
+          <div style="width: 32px"></div>
+          <div v-for="(value, index) in data.col_width" :key="index" class="table-item table-items">
+            <el-color-picker v-model="data.cols_bg_list[index]" />
             <el-input v-model="value.value">
               <template slot="prepend">列宽：</template><template slot="append">%</template></el-input
             >
@@ -232,11 +235,13 @@ export default {
         if (val < this.data.option_list.length) {
           this.data.option_list = this.data.option_list.slice(0, val);
           this.data.answer_lists = this.data.answer_lists.slice(0, val);
+          this.data.rows_bg_list = this.data.rows_bg_list.slice(0, val);
         } else {
           const diff = val - this.data.option_list.length;
           for (let i = 0; i < diff; i++) {
             this.data.option_list.push(Array.from({ length: this.data.property.column_count }, getOption));
             this.data.answer_lists.push(Array.from({ length: this.data.property.column_count }, getAnswerOption));
+            this.data.rows_bg_list.push('');
           }
         }
       },
@@ -248,7 +253,9 @@ export default {
           this.data.col_width.push({
             value: '',
           });
+          this.data.cols_bg_list.push('');
         }
+        this.data.cols_bg_list = this.data.cols_bg_list.slice(0, val);
         this.data.option_list = this.data.option_list.map((row) => {
           if (val < row.length) {
             this.data.col_width = this.data.col_width.slice(0, val);
@@ -516,6 +523,16 @@ export default {
       :deep p {
         margin: 0;
       }
+
+      :deep .el-input-group__append,
+      :deep .el-input-group__prepend {
+        padding: 0 5px;
+      }
+
+      &.table-items {
+        display: flex;
+        align-items: center;
+      }
     }
   }
 }

src/views/book/courseware/data/table.js

@@ -79,6 +79,8 @@ export function getTableData() {
     option_list: Array.from({ length: 2 }, () => Array.from({ length: 3 }, getOption)),
     record_list: [],
     answer_lists: Array.from({ length: 2 }, () => Array.from({ length: 3 }, getAnswerOption)),
+    rows_bg_list: ['', ''],
+    cols_bg_list: ['', '',''],
     mode: tableTypeList[1].value,
     vocabulary: '', // 用于选词的词汇
     word_list: [], // 选词列表

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

@@ -41,14 +41,11 @@
                           (data.property.decoration_color ? data.property.decoration_color : data.property.border_color)
                         : '1px dotted ' + data.property.border_color,
                   borderRadius: i === 0 && data.property.first_line_color ? '4px ' : '0',
-                  background:
-                    i === 0 && data.property.first_line_color
-                      ? data.property.first_line_color
-                      : j === 0
-                        ? data.property.first_column_color
-                        : data.styles.bgColor
-                          ? data.styles.bgColor
-                          : '',
+                  background: data.cols_bg_list[j]
+                    ? data.cols_bg_list[j]
+                    : data.rows_bg_list[i]
+                      ? data.rows_bg_list[i]
+                      : '',
                   height: data.property.height + 'px',
                 }"
               >
@@ -275,14 +272,11 @@
                               : data.property.border_color)
                           : '1px dotted ' + data.property.border_color,
                     borderRadius: i === 0 && data.property.first_line_color ? '4px ' : '0',
-                    background:
-                      i === 0 && data.property.first_line_color
-                        ? data.property.first_line_color
-                        : j === 0
-                          ? data.property.first_column_color
-                          : data.styles.bgColor
-                            ? data.styles.bgColor
-                            : '',
+                    background: data.cols_bg_list[j]
+                      ? data.cols_bg_list[j]
+                      : data.rows_bg_list[i]
+                        ? data.rows_bg_list[i]
+                        : '',
                     height: data.property.height + 'px',
                   }"
                 >