在页面弹窗展示json数据,需要换行展示,在这里有两种情况:
1、数据库存的json数据换行,为标准展示格式:
这种情况下,获取到后端数据后,前端只需要进行以下操作:
…
直接将后端数据展示:
ts部分:
openInformationDialog(row) {
isShowInfoDialog.value = true
if (row) {
informationJSON.value = row
}
}
div部分:
<div style="white-space: pre-line">
<pre>{{informationJSON}}</pre>
</div>
存在的问题,空格不展示,只有换行,后面需要探究一下。
2、数据库存的数据为字符串类型的json数据,无换行,无空格。
这种情况下,获取到后端数据后,前端需要将字符串进行JSON转换
ts部分:
openInformationDialog(row) {
isShowInfoDialog.value = true
if (row) {
informationJSON.value = JSON.stringify(JSON.parse(row), null, 4)
}
}
div部分:
<div style="white-space: pre-line">
<pre>{{informationJSON.value}}</pre>
</div>
这里推荐使用第二种方式,不论是数据库存储数据方面,还是页面展示效果方面来说,第二种都比较友好一点。