element table 渲染json格式

要渲染 JSON 格式的数据到 Element UI 的表格中，你可以使用 el-table 的 data 属性来绑定 JSON 数据，同时结合 el-table-column 组件来渲染每一列的数据。具体步骤如下：

1. 将 JSON 数据绑定到 el-table 的 data 属性上。
2. 在 el-table-column 中使用 prop 属性来指定该列显示的 JSON 数据的属性名。
3. 如果需要对数据进行格式化或者自定义渲染，可以使用 slot-scope 属性来自定义该列的显示内容。

以下是一个示例代码：

<template>
  <el-table :data="jsonData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
    <el-table-column prop="hobbies" label="爱好">
      <template slot-scope="scope">
        {{ scope.row.hobbies.join(', ') }}
      </template>
    </el-table-column>
  </el-table>
</template>

在上面的例子中，我们将 JSON 数据绑定到了 el-table 的 data 属性上，然后使用 el-table-column 组件来渲染每一列的数据。其中，prop 属性指定了该列显示的 JSON 数据的属性名，label 属性指定了该列的表头名称。在最后一列中，我们使用了 slot-scope 属性来自定义该列的显示内容，将 hobbies 数组中的元素通过 join() 方法拼接成了字符串并显示出来。