-
Notifications
You must be signed in to change notification settings - Fork 776
/
MatrixTable.vue
83 lines (81 loc) · 2.48 KB
/
MatrixTable.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
<div
:style="{ overflowX: question.showHorizontalScroll ? 'scroll' : '' as any }"
:class="question.cssClasses.tableWrapper"
>
<table :class="question.getTableCss()">
<thead v-if="table.showHeader">
<tr>
<template v-for="cell in table.headerRow.cells">
<th
v-if="cell.hasTitle"
:key="'header_' + cell.id"
:class="cell.className"
:style="{ minWidth: cell.minWidth, width: cell.width }"
>
<component
:is="question.getColumnHeaderWrapperComponentName(cell as any)"
:componentData="question.getColumnHeaderWrapperComponentData(cell as any)"
>
<survey-string :locString="cell.locTitle" />
<survey-matrixheaderrequired
v-if="!!cell.column"
:column="cell.column"
:question="question"
></survey-matrixheaderrequired>
</component>
</th>
<td
v-if="!cell.hasTitle"
:class="cell.className"
:key="'header_' + cell.id"
:style="{ minWidth: cell.minWidth, width: cell.width }"
></td>
</template>
</tr>
</thead>
<tbody>
<template
v-for="row in table.renderedRows"
:key="question.inputId + '_' + row.id"
>
<survey-matrix-row
:row="row"
:question="question"
></survey-matrix-row>
</template>
</tbody>
<tfoot v-if="table.showFooter">
<tr>
<survey-matrixdropdown-cell
:cell="cell"
:question="question"
v-for="(cell, cellIndex) in table.footerRow.cells"
:key="'footer_' + cellIndex"
/>
</tr>
</tfoot>
</table>
</div>
</template>
<script lang="ts" setup>
import type { QuestionMatrixDropdownModelBase } from "survey-core";
import { computed, getCurrentInstance } from "vue";
import { useBase } from "./base";
const props = defineProps<{ question: QuestionMatrixDropdownModelBase }>();
const table = computed(() => {
return props.question.renderedTable;
});
useBase(
() => table.value,
(newValue) => {
const instance = getCurrentInstance();
newValue.renderedRowsChangedCallback = () => {
instance?.proxy?.$forceUpdate();
};
},
(value) => {
value.renderedRowsChangedCallback = () => {};
}
);
</script>