1.创建一个baseFun.js
export function objectFun(obj) {
const result = []
// 处理所有可能的JSON字符串字段,递归处理所有嵌套JSON字符串
function processJsonFields(obj) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'string') {
const unescapedStr = obj[key].replace(/"({[^}]+})"/g, (match, p1) => p1)
try {
// 尝试解析为 JSON
const parsedValue = JSON.parse(unescapedStr)
obj[key] = parsedValue
// 如果解析成功且值是对象,递归处理嵌套的JSON字符串
if (typeof parsedValue === 'object' && parsedValue !== null) {
processJsonFields(parsedValue)
}
} catch (error) {
// 保留原始字符串值
obj[key] = unescapedStr
}
} else if (typeof obj[key] === 'object' && obj[key] !== null) {
// 递归处理嵌套对象
processJsonFields(obj[key])
}
}
}
}
// 展开对象并收集结果
function flatten(obj, parentKey = '') {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const newKey = parentKey ? `${parentKey}.${key}` : key
let value = obj[key]
if (typeof value === 'object' && value !== null) {
// 如果值是对象,递归展开
flatten(value, newKey)
} else {
// 其他类型直接存储
result.push({ key: newKey, value: value })
}
}
}
}
// 处理所有字段的可能的JSON字符串
processJsonFields(obj)
// 调用展开函数
flatten(obj)
return result
}
2.在前端引用
formData.event是需要转换的对象数据
import { objectFun } from '@/utils/baseFun'
<el-descriptions-item
v-for="(item, index) in objectFun(
formData.event
)"
:key="index"
label-class-name="desc-w"
:label="item.key"
>
<div class="value-content">
{{
item.value !== '' &&
item.value != null
? item.value
: '--'
}}
</div>
</el-descriptions-item>