Javascript 如何在Vue Atlas中以表格格式显示数据

我需要以表格格式显示用户数据，每行都有一个审批按钮。该批准按钮应调用行更新功能。我的代码没有按预期工作，我不知道为什么

我的代码：

等待批准的用户
从“axios”导入axios；
导出默认值{
数据：函数{
返回{
用户数据：“”，
}
},
安装的（）{
var self=这个；
axios.get（“”）//api调用
.然后（功能（res）{
self.userData=res.data；
log（“userdata”，self.userdata）
}
}
}

Api数据输出：

        [
          {
            "email": "asa", 
            "phone": "121212121", 
            "time": "2019-09-03T09:52:04.062486302Z", 
            "username": "as"
          }, 
          {
            "email": "asa@adsa", 
            "phone": "1231231312", 
            "time": "2019-09-03T09:52:22.296617365Z", 
            "username": "asa"
          }, 
          {
            "email": "test@gmail.com", 
            "phone": "1342132141414", 
            "time": "2019-09-03T09:52:47.201341563Z", 
            "username": "test"
          }
        ]

---

由于您使用的是vue atlas库，因此您可以这样做：

<va-table :hover="hover" :size="size" v-if="userData.length">
  <table>
    <thead>
      <tr>
        <th>email</th>
        <th>phone</th>
        <th>time</th>
        <th>username</th>
      </tr>
    </thead>
    </tbody>
    <tr v-for="user in userData">
        <td v-for="v in user">{{v}}</td>
        <td><va-button type="danger"><va-icon type="trash" /></va-button></td>
     </tr>
    </tbody>
  </table>
</va-table>

---

vue有大量的表格组件，这里有一整页的例子。谢谢你，兄弟……还有一个我需要一个按钮进行批准，应该调用一个API来更新该行。我不理解你说的每行a按钮末尾的按钮是什么意思。例如，删除该usertry

v-if=“userData&&userData.length”

Approve bro单击该按钮批准功能后，我如何传递该用户名

 data () {
    return {
      hover: true,
      size: 'lg',
      userData :[]
    }
  }