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

83
src/views/Design/components/Questions/MatrixCheckbox.vue
View File

@@ -1,42 +1,31 @@
<template>
<table class="matrix-table">
<thead>
<tr>
<th></th>
<td 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>-->
</td>
</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" />
<th v-for="(col, colIndex) in cols" :key="colIndex">
<input
class="van-icon matrix-checkbox"
type="checkbox"
:name="`R${rowIndex + 1}`"
:value="`${rowIndex + 1}_${colIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleMatrixRadioChange(rowIndex, colIndex)"
/>
</th>
</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="checkbox"
:name="`R${rowIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleMatrixCheckboxChange(rowIndex, colIndex)"
/>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
@@ -51,14 +40,17 @@ const rowRecord = defineModel<number[][]>('rowRecord', { required: false, defaul
const active = defineModel<boolean>('active', { required: false, default: true });
/* const isPreview = */ defineModel<boolean>('isPreview', { required: false, default: false });
const rows = defineModel<number[]>('rows', { required: false, default: () => [] });
const cols = defineModel<number[]>('cols', { required: false, default: () => [] });
const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
const element = defineModel<question>('element', {
required: false,
default: () => {
/**/
}
});
// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
const emitValue = () => {
emit('update:element', element.value);
};
// 判断是否选中
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
// [
@@ -77,7 +69,7 @@ const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
// };
// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
function handleMatrixRadioChange(row: number, col: number) {
function handleMatrixCheckboxChange(row: number, col: number) {
// 获取 colIndexArray
if (!rowRecord.value[row]) {
// 如果没有对应的row，创建一个
@@ -113,6 +105,9 @@ function handleMatrixRadioChange(row: number, col: number) {
// emits('update:matrixAnswer', props.matrixAnswer);
// emits('update:rowRecord', props.rowRecord);
// };
const emitValue = (/*val: unknown*/) => {
emit('update:element', element.value);
};
</script>
<style scoped lang="scss">