scope.row获取多层json数据

在写vue的一个页面时，后端传过来的json格式是这样的：

{
  "code": 200,
  "status": "OK",
  "message": "获取成功",
  "data": [
    {
      "id": 1,
      "name": "吴操作",
      "idCardNo": 351000200102031200,
      "role": {
        "id": 1,
        "name": "Demo Role",
        "authorities": [
          {
            "id": 1,
            "chineseName": "权限1"
          },
          {
            "id": 2,
            "chineseName": "权限2"
          }
        ]
      }
    }
  ]
}

想将role中的authorities的chineseName渲染到页面的表格中去，发现用scope.row常规办法不可行，获取到的还是authorities的全部json数据，经过尝试，以下方法可行：

<el-table-column label="角色名字" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top" v-for="role in scope.row.roles">
                            <span v-for="role in scope.row.roles">
                                <span v-for="authority in role.authorities">
                                    <p>权限名称：{{ authority.chineseName }}</p>
                                </span>
                            </span>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ role.name }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>

就是用v-for循环两次，取出authorities对象