使用vue组件创建静态表格-常见问题-PHP中文网

使用vue组件创建静态表格

爱谁谁

发布： 2024-08-18 19:09:43

原创

968人浏览过

使用vue组件创建静态表格，看起来简单，实际操作中却常常会遇到一些小坑。我曾经就因为一个不起眼的细节，调试了半天。

使用vue组件创建静态表格

我记得当时要实现一个展示用户信息的表格，字段包括用户名、邮箱和注册日期。我直接上手，用一个简单的 <table> 标签，然后在Vue组件里用 v-for 循环渲染数据。代码写得飞快，看起来也没什么问题。可是运行后，表格显示一片空白！

仔细检查后，才发现问题出在数据源上。我的数据并非直接在组件内定义，而是通过一个异步请求获取的。 v-for 指令在数据还未加载完成时，自然无法渲染任何内容。解决方法很简单，在 data() 方法中设置一个初始空数组，然后在 mounted() 生命周期钩子中发起数据请求，并在请求成功后更新数据。这样，页面会先显示一个空的表格，数据加载完成后再更新表格内容，避免了空白页面的尴尬。这段代码看起来像这样：

<code class="vue"><template>
  <table>
    <thead>
      <tr>
        <th>用户名</th>
        <th>邮箱</th>
        <th>注册日期</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.username }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.registered_at }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;
      });
  }
};
</script></code>

登录后复制

另一个需要注意的地方是表格数据的格式。我之前尝试过直接用对象数组作为数据源，但发现日期格式的处理比较麻烦。后来我改用包含日期字符串的数组，这样在模板中可以直接显示日期，避免了额外的日期格式化工作。这一个小小的改变，让代码简洁了不少。