vue遍历json数据

Question

实习生一枚，最近开始做一个项目，遇到一个问题，就是遍历json数据，一般都是有json数据的组合名，这样比较好在表格直接展示数据，但是我获取到的没有json数组名的，就有点懵逼了。

只有data开头，但是这012的不能直接在

{{list.id}}没有展示我想要的数据类型，得到却是

在postman上json数据格式是这样的

我应该如何正确遍历这些数据到table上呢？？并展示出来，我知道很简单，但是新手一枚，勿喷！

Answer 1

<el-table-column prop="id">
    <template slot-scope="scope">
        <span>{{ scope.row.id }}<span>
    </template>
</el-table-column>

scope.row为当前行的信息
scope.$index为当前行的索引
scope.column为当前列的信息

其他同理

Answer 2

你应该用scope.id而不是list.id

Answer 3

 <table>
      <tr v-for="(item,index) in data" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.chargeMode}}</td>
        ...
      </tr>
    </table>

Answer 4

大概写一下
假设你要渲染到Table上的数组叫list，那么你请求到数据后赋值给list

we.request('your/api', param)
    .then((res) => {
    this.list = res.data  // 从你的截图来看res.data就是你要的数组
})

然后在页面中

    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="排序"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="会员类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="chargeMode"
        label="xxx">
      </el-table-column>
    </el-table>