矩阵量表控件核心是「多题干×多选项」二维结构，通过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)，返回校验函数和错误信息对象，便于复用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！