表格宽度改为百分比 高度为行高

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

@@ -124,7 +124,9 @@
         </div>
         <div class="table-node">
           <div v-for="(value, index) in data.col_width" :key="index" class="table-item">
-            <el-input v-model="value.value"> <template slot="prepend">列宽：</template></el-input>
+            <el-input v-model="value.value">
+              <template slot="prepend">列宽：</template><template slot="append">%</template></el-input
+            >
           </div>
         </div>
       </div>
@@ -244,7 +246,7 @@ export default {
         const diff = val - this.data.option_list[0].length;
         for (let i = 0; i < diff; i++) {
           this.data.col_width.push({
-            value: 100,
+            value: '',
           });
         }
         this.data.option_list = this.data.option_list.map((row) => {

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

@@ -6,8 +6,8 @@
       <el-form-item label="宽度">
         <el-input-number v-model="property.width" :min="1" :step="50" />
       </el-form-item>
-      <el-form-item label="高度">
-        <el-input-number v-model="property.height" :min="1" :step="50" />
+      <el-form-item label="行高">
+        <el-input-number v-model="property.height" :min="1" :step="10" />
       </el-form-item>
       <el-form-item label="行数">
         <el-input-number v-model="property.row_count" :min="1" />
@@ -28,12 +28,12 @@
         </el-radio-group>
       </el-form-item>
       <el-divider />
-      <el-form-item label="首行颜色">
+      <!-- <el-form-item label="首行颜色">
         <el-color-picker v-model="property.first_line_color" />
       </el-form-item>
       <el-form-item label="首列颜色">
         <el-color-picker v-model="property.first_column_color" />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="边框颜色">
         <el-color-picker v-model="property.border_color" />
       </el-form-item>

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

@@ -40,7 +40,7 @@ export function getTableProperty() {
     sn_background_color: '#ea3232', // 序号背景色
     sn_display_mode: displayList[1].value,
 
-    height: 400,
+    height: 50,
     width: 600,
     row_count: 2,
     column_count: 3,
@@ -95,13 +95,13 @@ export function getTableData() {
     },
     col_width: [
       {
-        value: 100,
+        value: '',
       },
       {
-        value: 100,
+        value: '',
       },
       {
-        value: 100,
+        value: '',
       },
     ], // 列宽
     property: getTableProperty(),

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

@@ -8,21 +8,17 @@
         class="table-box"
         :style="{
           width: isMobile ? '100%' : data.property.width + 'px',
-
-          height: data.property.height + 'px',
         }"
       >
         <table
           :style="{
-            width: isMobile ? '100%' : table_width + 'px',
-
-            height: data.property.height + 'px',
+            width: '100%',
           }"
         >
           <colgroup>
             <col v-for="(item, i) in data.col_width" :key="`col-${i}`" :style="{ width: `${item.value}px` }" />
           </colgroup>
-          <tr v-for="(row, i) in data.option_list" :key="`tr-${i}`">
+          <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
                 :key="col.mark"
@@ -53,6 +49,7 @@
                         : data.styles.bgColor
                           ? data.styles.bgColor
                           : '',
+                  height: data.property.height + 'px',
                 }"
               >
                 <div :style="[tdStyle, computedRichStyle(col.content)]" class="cell-wrap">
@@ -245,13 +242,13 @@
         >
           <table
             :style="{
-              width: isMobile ? '100%' : table_width + 'px',
+              width: '100%',
 
               height: data.property.height + 'px',
             }"
           >
             <colgroup>
-              <col v-for="(item, i) in data.col_width" :key="`col-${i}`" :style="{ width: `${item.value}px` }" />
+              <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}`">
               <template v-for="(col, j) in row">