时间戳

首页 > 解决方案 > 在 Vue JS 中，如何在获得服务器响应后显示表头？

html - 在 Vue JS 中，如何在获得服务器响应后显示表头？

问题描述

在我的 Vue.JS 网页中，我有一个使用 Http - GET 方法的 API 调用。在获取 API Response 之前，默认会显示表头。这看起来不太好。您能否在我下面的当前代码中提供帮助，如何仅在获得服务器响应后显示表头？提前致谢。

包信息.vue

<template>
    
<h3> Package List </h3>


<div>

  <br>   <br> <br> 
    <button  @click="fetchPackageIDs"> Get Package IDs </button>

    <br> <br> 
  <table class="table-bordered table-hover table-sm" align="center">
  <thead class="thead-light">
    <tr scope="row" align="center">
     
      <th> Package IDs  </th>
      <th> Package Type  </th>
      <th> State  </th>
      <th> Sub State  </th>
      
    </tr>
  </thead>
  <tbody>
    <tr scope="row" align="center" v-for="(user) in posts.packageIDs" :key="user.packageId">
    
      <td>{{ user.packageId }}</td> 
        <td>{{ user.packageType }}</td>
        <td>{{ user.state }}</td>
        <td>{{ user.subState }}</td>
      
    </tr>
  </tbody>
</table>
 <br>  <br>   <br>
</div>

</template>

<script>



import { apiHost} from '../config'
import axios from 'axios'


export default {
    name:"PackageInfo",
    data(){
        return{
            posts: {
            
                packageIDs:[]
              
            }
            
        }
    },
    methods:{
        fetchPackageIDs(e){
          const url=apiHost+'tdg/packageIds/'+localStorage.getItem('userId');
          console.log(url);
          e.preventDefault();
              
           axios.get(url,null,null)   
          .then(response=>this.posts.packageIDs=response.data)
          .catch(e => {
                console.log(e); 
          })
          console.log(this.posts.packageIDs);
      
         },
    }
}

</script>



<style >

.form-control:focus{
border-color:#167bff;
box-shadow:none;
}

.auth-inner{

width:450px;
margin :auto;
background: #ffffff;
box-shadow:0px 14px 80px rgba (34,35,58,0.2);
padding:40px 55px 45px 55px;
border-radius:15px;
transition: all .3s;

}

table.table-bordered{
    border:1px solid black;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid black;
    padding: 7px 30px;
}
table.table-bordered > tbody > tr > td{
    border:1px solid black;
    padding: 7px 30px;
}

</style>

标签： htmlcssvue.jshtml-tablevuejs3

解决方案

您可以通过使用布尔属性来实现它。

<template>
   <div>
      <table v-if="showTable">
         ...
         <tr v-if="posts.packageIDs.length === 0">
             <td colspan={columnsCount}> No Records Found </td>
         </tr>
      </table>
   </div>
</template>

<script>
    export default {
       data () {
          return {
              showTable: false,
              posts: {
                  packageIDs: []
              }
          };
       },
       methods: {
          fetchPackageIDs(e) {
           this.showTable = false;
           axios.get({url})   
          .then(response=>this.posts.packageIDs=response.data)
          .catch(e => {console.log(e);})
          .finally(() => this.showTable = true)
         }
       }
    }
</script>

推荐阅读