100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<template>
|
||
<table class="matrix-table">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<td v-for="col in columns" :key="col.option">
|
||
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
|
||
<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" />
|
||
</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
|
||
<th v-html="row.option" />
|
||
<td v-for="(col, colIndex) in columns" :key="colIndex">
|
||
<input
|
||
type="checkbox"
|
||
:value="`${rowIndex + 1}_${colIndex + 1}`"
|
||
:checked="isOptionChecked(rowIndex, colIndex)"
|
||
@change="handleColNameChange(row.option, col.option, $event)"
|
||
/>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { defineProps } from 'vue';
|
||
import { vFocus } from '@/utils/directives/useVFocus';
|
||
|
||
const props = defineProps<{
|
||
rows: { option: string }[];
|
||
columns: { option: string; editor?: boolean }[];
|
||
questionType: number;
|
||
matrixAnswer: { [key: string]: any };
|
||
rowRecord: (number | string)[];
|
||
}>();
|
||
|
||
/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
|
||
|
||
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
|
||
const key = `R${rowIndex + 1}_C${colIndex + 1}`;
|
||
return !!props.matrixAnswer[key];
|
||
};
|
||
|
||
const handleRowNameChange = () => {
|
||
// 你可以在这里添加其他逻辑
|
||
};
|
||
|
||
// const handleColNameChange = (rowOption: string, colOption: string, e: Event) => {
|
||
// 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 === 10) {
|
||
// if (target.checked) {
|
||
// props.rowRecord[col] = (props.rowRecord[col] || []).concat(row + 1);
|
||
// } else {
|
||
// props.rowRecord[col] = (props.rowRecord[col] || []).filter(item => item !== row + 1);
|
||
// }
|
||
// const newMatrixAnswer: { [key: string]: boolean } = {};
|
||
// const newRowRecord: (number | string)[] = [...props.rowRecord];
|
||
// props.rows.forEach((rowOption, rowIndex) => {
|
||
// const colOptions = newRowRecord[rowIndex];
|
||
// if (colOptions) {
|
||
// colOptions.forEach((col: any) => {
|
||
// newMatrixAnswer[`R${rowIndex + 1}_C${col}`] = true;
|
||
// });
|
||
// }
|
||
// });
|
||
// }
|
||
//
|
||
// emits('update:matrixAnswer', newMatrixAnswer);
|
||
// emits('update:rowRecord', newRowRecord);
|
||
// };
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.matrix-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.matrix-table th,
|
||
.matrix-table td {
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
text-align: center;
|
||
}
|
||
</style>
|