矩阵量表控件核心是「多题干×多选项」二维结构，通过rows/columns/model扁平化数据解耦渲染，用v-for嵌套生成行列并绑定v-model，支持单选/多选、行级校验、一键清空、键盘导航与评分高亮。
矩阵量表控件的核心结构
矩阵量表本质是「多题干 × 多选项」的二维表格，常见于心理测评、满意度调查等场景。比如：对“沟通能力”“执行效率”“团队协作”三项能力，分别按“非常不满意→非常满意”五级打分。Vue 3 中实现的关键不是堆DOM，而是把行（题干）、列（评分维度）、单元格（打分操作）三者解耦，用数据驱动渲染。
数据模型设计：扁平化 + 映射关系
避免嵌套过深，推荐使用扁平数组 + 映射字段：
-
rows：题干列表，每个含
id、label（如“沟通能力”） -
columns：评分维度，每个含
value（如1~5）、label（如“非常不满意”） -
model：响应式对象，键为
rowId_columnValue（如"q1_3"），值为布尔或数字，表示该题干是否选中该分值
这样设计便于校验、序列化提交，也兼容单选/多选矩阵（心理量表多为单选，但系统需留扩展）。
组件渲染逻辑：动态生成行列 + 绑定 v-model
使用 v-for 嵌套渲染，外层遍历 rows，内层遍历 columns。每个单元格用 el-radio（单选）或 el-checkbox（多选），v-model 绑定到 model[`${row.id}_${col.value}`]。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
关键点：
- 用
computed动态生成当前行已选中的值，用于 radio 的v-model单一绑定（避免每个 cell 单独绑） - 为每行设置独立的
v-model，值为当前行选中的 column.value，再通过计算属性映射到 model 对象 - 支持空值：未评分时 model 中对应 key 可为
null或undefined，不影响渲染
交互与校验增强
矩阵控件常需额外逻辑：
- 行级必填：校验每行 model 是否有非空值，错误提示可定位到具体题干
-
一键清空：提供按钮重置整行或全部，操作
model对象即可，无需操作 DOM -
键盘导航：监听
ArrowLeft/Right/Up/Down，用ref管理焦点单元格，提升无障碍体验 - 评分高亮：根据当前选中值，给整行加背景色或图标，辅助用户确认选择
校验规则建议封装在 composable 中，例如 useMatrixValidator(rows, model)，返回校验函数和错误信息对象，便于复用。
