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,53 +127,64 @@ const errorMessage = defineModel('errorMessage', {
     </template>
 
     <template #input>
-      <el-table :data="rows" style="width: 90vw" border stripe>
-        <el-table-column :width="tableWidth">
-          <template #header></template>
-          <template #default="{ row /*, column, $index*/ }">
-            <div style="position: relative">
-              <el-text truncated :style="{ width: `${tableWidth}px` }">
-                <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
-              </el-text>
-              <van-popover
-                v-model="row.showAction"
-                placement="left-end"
-                trigger="click"
-                :actions="popoverActions"
-                @select="handleActionSelect($event, row, 'row')"
-              >
-                <template #reference>
-                  <div v-if="active" class="icon">
-                    <Io5EllipsisVerticalSharp />
-                  </div>
-                </template>
-              </van-popover>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column v-for="(col, colIndex) in cols" :key="col.option" :width="tableWidth">
-          <template #header>
-            <div style="position: relative">
-              <el-text truncated :style="{ width: `${tableWidth}px` }">
-                <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
-              </el-text>
-              <van-popover
-                v-model="col.showAction"
-                placement="left-end"
-                trigger="click"
-                :actions="popoverActions"
-                @select="handleActionSelect($event, col, 'col')"
-              >
-                <template #reference>
-                  <div v-if="active" class="icon">
-                    <Io5EllipsisVerticalSharp />
-                  </div>
-                </template>
-              </van-popover>
-            </div>
-          </template>
-          <template #default="{ /*row, column, */ $index: rowIndex }">
-            <div>
+      <div style="border-left: 1px solid #f4f4f4">
+        <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>
+                  <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
+                </el-text>
+                <van-popover
+                  v-model="row.showAction"
+                  placement="left-end"
+                  trigger="click"
+                  :actions="popoverActions"
+                  @select="handleActionSelect($event, row, 'row')"
+                >
+                  <template #reference>
+                    <div v-if="active" class="icon">
+                      <Io5EllipsisVerticalSharp />
+                    </div>
+                  </template>
+                </van-popover>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-for="(col, colIndex) in cols"
+            :key="col.option"
+            :width="130"
+            style="position: relative"
+          >
+            <template #header>
+              <div>
+                <el-text truncated :style="{ width: `${tableWidth}px` }">
+                  <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
+                </el-text>
+                <van-popover
+                  v-model="col.showAction"
+                  placement="left-end"
+                  trigger="click"
+                  :actions="popoverActions"
+                  @select="handleActionSelect($event, col, 'col')"
+                >
+                  <template #reference>
+                    <div v-if="active" class="icon">
+                      <Io5EllipsisVerticalSharp />
+                    </div>
+                  </template>
+                </van-popover>
+              </div>
+            </template>
+            <template #default="{ /*row, column, */ $index: rowIndex }">
               <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>
+            </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;
-  right: -10px;
+  top: 15%;
+  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>