看到的row 是{ "rowNo": "1", "issueLocation": "/path", "issueContent": "XXX", "correctContent": "", "researchNo": "", "causePhase": "", "causeCategory": "", "approveDate": "" }
时间: 2025-07-23 15:54:48 浏览: 0
你看到的 `row` 是一个标准的 JSON 对象:
```json
{
"rowNo": "1",
"issueLocation": "/path",
"issueContent": "XXX",
"correctContent": "",
"researchNo": "",
"causePhase": "",
"causeCategory": "",
"approveDate": ""
}
```
这说明你已经成功地将 `detailData` 中的数据传递给了 `review-table-column` 的作用域插槽,`row` 是一个有效的对象,结构清晰。
---
## ✅ 为什么你会看到这个 JSON?
这是因为在模板中你写了:
```vue
<template #default="{ row }">
{{ row }}
</template>
```
Vue 在模板中渲染对象时,会自动调用 `toString()` 方法,对于对象来说,结果是 `[object Object]`。但如果你在浏览器开发者工具中点击这个对象查看,浏览器会解析它并以 JSON 格式展示出来,所以你会看到:
```json
{
"rowNo": "1",
...
}
```
这只是浏览器的开发者工具对对象的友好展示,并不是 Vue 的 bug。
---
## ✅ 正确使用方式
你应该访问 `row` 的具体字段,例如:
```vue
<template #default="{ row }">
{{ row.rowNo }} <!-- 显示 "1" -->
</template>
```
或者如果你想显示 `issueLocation`:
```vue
{{ row.issueLocation }}
```
---
## ✅ 如果你想查看完整的对象结构(调试用)
可以使用 `JSON.stringify()`:
```vue
<pre>{{ JSON.stringify(row, null, 2) }}</pre>
```
这会将 `row` 对象以格式化的 JSON 字符串形式显示出来,方便你调试数据结构。
---
## ✅ 示例:显示多个字段
```vue
<template #default="{ row }">
<div>連番: {{ row.rowNo }}</div>
<div>指摘箇所: {{ row.issueLocation }}</div>
<div>指摘内容: {{ row.issueContent }}</div>
</template>
```
---
## ✅ 总结
| 问题 | 原因 | 解决方案 |
|------|------|-----------|
| 模板中显示 `[object Object]` | 直接输出对象 | 使用 `row.字段名` 或 `JSON.stringify(row)` |
| 想要调试数据结构 | 需要查看完整对象 | 使用 `JSON.stringify(row, null, 2)` |
| 数据未正确显示 | 字段名错误或未绑定 | 检查字段名和数据绑定是否正确 |
---
###
阅读全文
相关推荐



















