feat: 自定义矩阵列表长度

- 添加 tableWidth 来设定矩阵列表宽度， 默认110

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

@@ -3,21 +3,15 @@
     <el-table-column width="140">
       <template #header></template>
       <template #default="{ row /*, column, $index*/ }">
-        <el-text truncated>
+        <el-text truncated :style="{ width: `${tableWidth}px` }">
           <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
         </el-text>
       </template>
     </el-table-column>
     <el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
       <template #header>
-        <el-text truncated>
+        <el-text truncated :style="{ width: `${tableWidth}px` }">
-          <contenteditable
+          <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
-            v-if="col.option"
-            v-model="col.option"
-            :active="active"
-            @blur="emitValue"
-          />
-          <van-field v-else v-model="col.option" placeholder="请输入"></van-field>
         </el-text>
       </template>
       <template #default="{ /*row, column, */ $index: rowIndex }">
@@ -41,7 +35,7 @@ const rowRecord = defineModel<number[][]>('rowRecord', { required: false, defaul
 // const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
 // 检查 rowRecord 是否存在
 // console.log(`rowRecord:`, rowRecord.value);
-
+const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
 const active = defineModel<boolean>('active', { required: false, default: true });
 /* const isPreview =  */ defineModel<boolean>('isPreview', { required: false, default: false });
 const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });

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

@@ -1,23 +1,17 @@
 <template>
   <el-table :data="rows" style="width: 100%">
-    <el-table-column width="80">
+    <el-table-column :width="tableWidth">
       <template #header></template>
       <template #default="{ row /*, column, $index*/ }">
-        <el-text truncated>
+        <el-text truncated :style="{ width: `${tableWidth}px` }">
           <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
         </el-text>
       </template>
     </el-table-column>
-    <el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
+    <el-table-column v-for="(col, colIndex) in cols" :key="col.option" :width="tableWidth">
       <template #header>
-        <el-text truncated>
+        <el-text truncated :style="{ width: `${tableWidth}px` }">
-          <contenteditable
+          <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
-            v-if="col.option"
-            v-model="col.option"
-            :active="active"
-            @blur="emitValue"
-          />
-          <van-field v-else v-model="col.option" placeholder="请输入"></van-field>
         </el-text>
       </template>
       <template #default="{ /*row, column, */ $index: rowIndex }">
@@ -41,7 +35,7 @@ const rowRecord = defineModel<number[]>('rowRecord', { required: false, default:
 // console.log(`rowRecord:`, rowRecord.value);
 
 /* const isPreview =  */ defineModel<boolean>('isPreview', { required: false, default: false });
-
+const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
 const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
 const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
 /* const active = */ defineModel<boolean>('active', { required: false, default: true });

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

@@ -3,14 +3,14 @@
     <el-table-column width="140">
       <template #header></template>
       <template #default="{ row /*, column, $index*/ }">
-        <el-text truncated>
+        <el-text truncated :style="{ width: `${tableWidth}px` }">
           <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
         </el-text>
       </template>
     </el-table-column>
     <el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
       <template #header>
-        <el-text truncated>
+        <el-text truncated :style="{ width: `${tableWidth}px` }">
           <contenteditable
             v-if="col.option"
             v-model="col.option"
@@ -23,6 +23,7 @@
       <template #default="{ /*row, column, */ $index: rowIndex }">
         <input
           type="text"
+          style="width: 100%"
           :name="`R${rowIndex + 1}`"
           :value="getInputValue(rowIndex, colIndex)"
           @change="handleMatrixTextChange(rowIndex, colIndex, $event)"
@@ -48,6 +49,7 @@ const element = defineModel<question>('element', {
 /* const isPreview =  */ defineModel<boolean>('isPreview', { required: false, default: false });
 const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
 const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
+const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
 
 const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);