Question

我需要以表格格式显示用户数据，并在每行中显示一个批准按钮。该批准按钮应调用函数进行行更新。我的代码无法正常工作，我也不知道为什么。

我的代码：

             <template>
            <div>
              <va-card  >
                <h3>Users waiting for Approval </h3>
              </va-card>
            </div>  
            </template>

            <script>
            import axios from 'axios';

            export default{
                data: function{
                    return{
                        userData:'',
                    }
                },
                mounted(){
                    var self = this;

                    axios.get('') //api call
                    .then(function(res){
                        self.userData = res.data;

                              console.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"
          }
        ]

Answer 1

由于您正在使用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>

您的数据对象：

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

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

1 个答案: