126 lines
4.0 KiB
Vue
126 lines
4.0 KiB
Vue
<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>-->
|
||
<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>
|
||
|
||
<script setup lang="ts">
|
||
// 记录行和列的索引
|
||
const rowRecord = defineModel<string[][]>('rowRecord', { required: false, default: () => [] });
|
||
// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
|
||
// 检查 rowRecord 是否存在
|
||
// console.log(`rowRecord:`, rowRecord.value);
|
||
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: () => [] });
|
||
const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
|
||
|
||
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
|
||
|
||
// const handleRowNameChange = (/* value: string */) => {
|
||
// console.log(`row change: ${value}`);
|
||
// 你可以在这里添加其他逻辑
|
||
// };
|
||
|
||
function getInputValue(row: number, col: number) {
|
||
// console.log(`row: ${row}, col: ${col}`);
|
||
// console.log(`rowRecord:`, rowRecord.value);
|
||
|
||
return rowRecord.value?.[row]?.[col] ?? '';
|
||
}
|
||
|
||
// 当 matrix text 选中时，更新 rowRecord 和 matrixAnswer
|
||
function handleMatrixTextChange(row: number, col: number, e: Event) {
|
||
const target = e.target as HTMLInputElement;
|
||
const inputValue = target.value;
|
||
|
||
// 获取 colIndexArray
|
||
if (!rowRecord.value[row]) {
|
||
// 如果没有对应的row，创建一个
|
||
rowRecord.value[row] = [];
|
||
}
|
||
// cols 的逻辑 和 handleMatrixRadioChange 一致
|
||
const cols = rowRecord.value[row];
|
||
cols[col] = inputValue;
|
||
// console.log(`rowRecord:`, rowRecord.value);
|
||
}
|
||
// const handleColNameChange = (rowOption: string, colOption: string) => {
|
||
// // const target = e.target as HTMLInputElement;
|
||
// const col = props.columns.findIndex((option) => option.option === colOption);
|
||
// const row = props.rows.findIndex((option) => option.option === rowOption);
|
||
|
||
// if (props.questionType === 9) {
|
||
// props.rowRecord[col] = row + 1;
|
||
// props.matrixAnswer = {};
|
||
// props.rowRecord.forEach((row, index) => {
|
||
// props.matrixAnswer[`${index + 1}_${row}`] = 1;
|
||
// });
|
||
// }
|
||
|
||
// emits('update:matrixAnswer', props.matrixAnswer);
|
||
// emits('update:rowRecord', props.rowRecord);
|
||
// };
|
||
const emitValue = () => {
|
||
emit('update:element', element.value);
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/assets/css/theme';
|
||
|
||
.matrix-table {
|
||
text-align: left;
|
||
|
||
tr,
|
||
td {
|
||
//width: 200px;
|
||
}
|
||
}
|
||
|
||
input {
|
||
width: 70%;
|
||
padding: 0 5px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
outline: 1px solid #f4f4f4;
|
||
|
||
&:focus {
|
||
outline: 1px solid $theme-color;
|
||
}
|
||
}
|
||
</style>
|