hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 矩阵问卷可以左右滑动

Browse Source 
- 矩阵多选、矩阵填空现在可以左右滚动
This commit is contained in:
Huangzhe
2025-03-19 17:51:36 +08:00
parent 1356c5e72c
commit aa1e26cc0b
5 changed files with 83 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/Design/components/Questions/MatrixText.vue
View File

@@ -1,40 +1,31 @@
<template>
<table class="matrix-table">
<thead>
<tr>
<th></th>
<th v-for="col in cols" :key="col.option">
<contenteditable v-model="col.option" :active="active" @blur="emitValue" />
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<!-- <input-->
<!-- v-if="col.editor"-->
<!-- v-model="col.option"-->
<!-- v-focus-->
<!-- type="text"-->
<!-- @focusout="col.editor = false"-->
<!-- @click="handleRowNameChange(col.option!)"-->
<!-- />-->
<!-- <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>-->
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<!-- <th v-html="row.option"></th>-->
<el-table :data="rows" style="width: 100%">
<el-table-column width="140">
<template #header></template>
<template #default="{ row /*, column, $index*/ }">
<contenteditable v-model="row.option" :active="active" @blur="emitValue" />
<td v-for="(col, colIndex) in cols" :key="colIndex">
<input
type="text"
placeholder="请输入"
:name="`R${rowIndex + 1}`"
:value="getInputValue(rowIndex, colIndex)"
@change="handleMatrixTextChange(rowIndex, colIndex, $event)"
/>
</td>
</tr>
</tbody>
</table>
</template>
</el-table-column>
<el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
<template #header>
<contenteditable
v-if="col.option"
v-model="col.option"
:active="active"
@blur="emitValue"
/>
<van-field v-else v-model="col.option" placeholder="请输入"></van-field>
</template>
<template #default="{ /*row, column, */ $index: rowIndex }">
<input
type="text"
:name="`R${rowIndex + 1}`"
:value="getInputValue(rowIndex, colIndex)"
@change="handleMatrixTextChange(rowIndex, colIndex, $event)"
/>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
@@ -44,7 +35,12 @@ const rowRecord = defineModel<string[][]>('rowRecord', { required: false, defaul
// 检查 rowRecord 是否存在
// console.log(`rowRecord:`, rowRecord.value);
const active = defineModel<boolean>('active', { required: false, default: true });
const element = defineModel<question>('element', {
required: false,
default: () => {
/**/
}
});
/* 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: () => [] });