<review-table-column label="連番" prop="rowNo"> <template #default="{ row, column }"> <!-- <review-input v-model="row?.rowNo" /> --> {{ row }} {{ column }} </template> </review-table-column>{ "rowNo": "1", "issueLocation": "/path", "issueContent": "XXX", "correctContent": "", "researchNo": "", "causePhase": "", "causeCategory": "", "approveDate": "" } { "id": "rowNo", "prop": "rowNo", "label": "連番" }

你已经成功地从 `<review-table-column>` 的作用域插槽中获取了 `row` 和 `column`，并且输出如下： ```json { "rowNo": "1", "issueLocation": "/path", ... } { "id": "rowNo", "prop": "rowNo", "label": "連番" } ``` 这说明你的组件结构是正确的，`row` 是当前行的数据对象，`column` 是当前列的配置信息。 --- ## ✅ 问题回顾 你提到： > 单独显示 `{{ row }}` 有值，但显示 `{{ row.rowNo }}` 报错。 现在你已经确认了 `row` 是一个标准的 JSON 对象，所以理论上你应该可以直接访问 `row.rowNo`。 --- ## ✅ 问题定位 根据你输出的 `row` 内容来看： ```json { "rowNo": "1", ... } ``` 这说明 `row` 是一个标准对象，**不应该报错**。如果仍然报错： ``` Cannot read properties of undefined (reading 'rowNo') ``` 那说明你访问 `row.rowNo` 时，`row` 实际上是 `undefined`，这可能是： ### ❗ 1. 插槽作用域变量未正确绑定 确保你在组件内部正确地将 `row` 传递给了插槽。 #### 示例：`ReviewTableColumn.vue` ```vue <template> <td> <slot :row="rowData" :column="columnData"></slot> </td> </template> <script setup> defineProps(['rowData', 'columnData']) </script> ``` #### 使用时： ```vue <review-table :data="detailData.value"> <review-table-column label="連番" prop="rowNo"> <template #default="{ row, column }"> {{ row.rowNo }} <!-- 这里应正常显示 --> </template> </review-table-column> </review-table> ``` 如果你在组件中错误地传递了 `row`，比如： ```vue <slot :rowData="rowData" /> ``` 那你必须用 `rowData` 来访问： ```vue <template #default="{ rowData }"> {{ rowData.rowNo }} </template> ``` --- ## ✅ 推荐做法：使用解构并调试 你可以这样写来调试： ```vue <template #default="slotProps"> <pre>{{ JSON.stringify(slotProps, null, 2) }}</pre> </template> ``` 这样你可以看到插槽中到底传了哪些变量，比如： ```json { "row": { "rowNo": "1", ... }, "column": { "prop": "rowNo", ... } } ``` --- ## ✅ 正确访问方式 ```vue <template #default="{ row, column }"> <div>連番: {{ row.rowNo }}</div> <div>列名: {{ column.label }}</div> </template> ``` --- ## ✅ 常见错误排查 | 问题 | 表现 | 原因 | 解决方法 | |------|------|------|-----------| | `row.rowNo` 报错 | `row` 是 `undefined` | 插槽变量名不匹配 | 检查组件是否正确传递 `row` | | `row.rowNo` 报错 | `row` 是 Proxy 或 Ref | Vue 响应式包装 | 使用 `toRaw(row).rowNo` | | `row.rowNo` 报错 | `row` 是字符串或数字 | 数据类型错误 | 检查数据源是否为对象 | --- ## ✅ 示例修复代码 ```vue <template #default="{ row }"> <div>連番: {{ row.rowNo }}</div> <div>指摘箇所: {{ row.issueLocation }}</div> </template> ``` 确保你的 `detailData.value` 是这样的结构： ```js const detailData = ref([ { rowNo: '1', issueLocation: '/path', issueContent: 'XXX', correctContent: '', researchNo: '', causePhase: '', causeCategory: '', approveDate: '' } ]) ``` --- ## ✅ 总结 - `{{ row }}` 显示正常说明 `row` 是一个标准对象。 - `{{ row.rowNo }}` 报错说明 `row` 是 `undefined` 或变量名不一致。 - 使用 `JSON.stringify(slotProps)` 可以快速定位插槽传参结构。 - 确保组件内部正确地将 `row` 传递给插槽。 --- ###