前端列表解析json里的参数，页面正常显示，但是控制台报错，怎么解决

由于 JSON.parse 方法在某些情况下抛出了异常，导致渲染过程中出现错误。以下是几种可能的原因和解决方法：

1. 确保 cfgJsonYj 字段存在且为有效的 JSON 字符串

在解析 cfgJsonYj 字段之前，确保它存在且是一个有效的 JSON 字符串。如果 cfgJsonYj 为空或格式不正确，JSON.parse 会抛出异常。

2. 使用 try-catch 捕获解析异常

在解析 JSON 字符串时，使用 try-catch 块来捕获可能的解析异常，并提供一个默认值。

3. 使用计算属性或方法来处理解析逻辑

将解析逻辑移到计算属性或方法中，以保持模板的简洁性和可读性。

示例代码

组件 (MyComponent.vue)

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="subject" label="主题" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ getBodyOrSubject(scope.row.cfgJsonYj, 'subject') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="body" label="邮件正文" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ getBodyOrSubject(scope.row.cfgJsonYj, 'body') }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, cfgJsonYj: '{"body":"问问去问问","subject":"问问"}' },
        { id: 2, cfgJsonYj: '{"body":"测试邮件正文","subject":"测试主题"}' },
        { id: 3, cfgJsonYj: null } // 示例：cfgJsonYj 为 null
      ]
    };
  },
  methods: {
    getBodyOrSubject(cfgJsonYj, field) {
      if (!cfgJsonYj) {
        return ''; // 如果 cfgJsonYj 为空或不存在，返回空字符串
      }
      try {
        const parsedJson = JSON.parse(cfgJsonYj);
        return parsedJson[field] || ''; // 返回指定字段的值，如果不存在则返回空字符串
      } catch (error) {
        console.error('JSON 解析错误:', error);
        return ''; // 解析失败时返回空字符串
      }
    }
  }
};
</script>

解释

1. 数据部分 (data)：

   • tableData 数组包含多个对象，每个对象都有一个 cfgJsonYj 字段，该字段是一个 JSON 字符串。

2. 模板部分 (<template>)：

   • 使用 el-table 组件显示表格数据。
   • 使用 el-table-column 组件定义表格的列。
   • 使用 slot-scope 插槽来自定义列的内容。
   • 在插槽中调用 getBodyOrSubject 方法来解析 cfgJsonYj 字段并获取指定的字段值。

3. 方法部分 (methods)：

   • getBodyOrSubject 方法：
     • 检查 cfgJsonYj 是否存在且不为空。
     • 使用 try-catch 块来捕获 JSON.parse 的异常。
     • 如果解析成功，返回指定字段的值；如果解析失败或字段不存在，返回空字符串。

通过这种方式，确保在解析 cfgJsonYj 字段时不会抛出异常，并且能够正确显示表格中的数据。