feat[design]: 矩阵优化

- 样式调整
- 显示调整， 当行和列都没有的时候取消显示

src/views/Design/components/Questions/MatrixQuestion.vue

@@ -18,7 +18,7 @@ const element = defineModel<question>('element', {
   }
 });
 // table 宽度
-const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
+const tableWidth = defineModel<number | string>('tableWidth', { required: false, default: 110 });
 // 行记录(相关答案的记录)
 const rowRecord = defineModel<unknown[]>('rowRecord', { required: false, default: () => [] });
 // 是否是预览状态
@@ -127,12 +127,19 @@ const errorMessage = defineModel('errorMessage', {
     </template>
 
     <template #input>
-      <el-table :data="rows" style="width: 90vw" border stripe>
+      <div style="border-left: 1px solid #f4f4f4">
-        <el-table-column :width="tableWidth">
+        <el-table
+          :data="rows"
+          style="width: 85vw"
+          row-class-name="table-row"
+          empty-text=""
+          v-if="rows.length || cols.length"
+        >
+          <el-table-column width="130px">
             <template #header></template>
             <template #default="{ row /*, column, $index*/ }">
               <div style="position: relative">
-              <el-text truncated :style="{ width: `${tableWidth}px` }">
+                <el-text truncated>
                   <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
                 </el-text>
                 <van-popover
@@ -151,9 +158,14 @@ const errorMessage = defineModel('errorMessage', {
               </div>
             </template>
           </el-table-column>
-        <el-table-column v-for="(col, colIndex) in cols" :key="col.option" :width="tableWidth">
+          <el-table-column
+            v-for="(col, colIndex) in cols"
+            :key="col.option"
+            :width="130"
+            style="position: relative"
+          >
             <template #header>
-            <div style="position: relative">
+              <div>
                 <el-text truncated :style="{ width: `${tableWidth}px` }">
                   <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
                 </el-text>
@@ -173,7 +185,6 @@ const errorMessage = defineModel('errorMessage', {
               </div>
             </template>
             <template #default="{ /*row, column, */ $index: rowIndex }">
-            <div>
               <component
                 :is="activeComponent"
                 :element="element"
@@ -181,21 +192,19 @@ const errorMessage = defineModel('errorMessage', {
                 :colIndex="colIndex"
                 v-model:rowRecord="rowRecord"
               />
-            </div>
             </template>
           </el-table-column>
         </el-table>
+      </div>
     </template>
   </van-field>
 </template>
+
 <style lang="scss" scoped>
 @import '@/assets/css/theme';
 
-.matrix-table {
-  text-align: left;
-}
 input[type='text'] {
-  width: 70%;
+  width: 100%;
   padding: 0 5px;
   border: none;
   border-radius: 4px;
@@ -205,40 +214,77 @@ input[type='text'] {
     outline: 1px solid $theme-color;
   }
 }
-.matrix-radio {
-  position: relative;
-  overflow: hidden;
-  width: 15px;
-  height: 15px;
-  border: 1px solid #f4f4f4;
-  border-radius: 50%;
-  outline: none;
-  cursor: pointer;
-  appearance: none; /* 去除默认样式 */
-  //transition: border-color 0.3s;
-}
-
-.matrix-radio:checked {
-  border-color: transparent; /* 选中时边框颜色 */
-}
-.matrix-radio:checked::before {
-  content: '\e728';
-  position: absolute;
-  width: 15px;
-  height: 15px;
-  background-color: $theme-color; /* 选中颜色 */
-  color: #fff;
-  line-height: 15px;
-  text-align: center;
-}
 
 .icon {
   position: absolute;
-  top: 3px;
+  top: 15%;
-  right: -10px;
+  right: 0;
 
   & > svg {
     height: 15px;
   }
 }
+
+:deep(.el-table) {
+  // Remove horizontal borders
+  .el-table__inner-wrapper::before {
+    display: none;
+  }
+
+  // Remove all borders first
+  .el-table__cell {
+    border: none;
+  }
+
+  // Add only vertical borders
+  .el-table__cell::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #ebeef5;
+    height: 100%;
+  }
+
+  // Add left vertical border to the first cell in each row
+  .el-table__cell:first-child::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #ebeef5;
+    height: 100%;
+  }
+
+  // Add horizontal line at the top of the table
+  .el-table__header-wrapper .el-table__cell {
+    border-top: 1px solid #ebeef5;
+  }
+
+  // Remove the border between header and body
+  .el-table__header-wrapper tr.el-table__row th.el-table__cell.is-leaf {
+    border-bottom: none;
+  }
+
+  .el-table__body-wrapper tr:first-child td.el-table__cell {
+    border-top: none;
+  }
+
+  // Add horizontal line at the bottom of the table
+  .el-table__row:last-child .el-table__cell {
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  // Center all content
+  .cell {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 </style>