vue 动态创建表格

Vue.js 动态创建表格通常涉及到使用模板（template）和数据绑定（data）的能力。当数据发生变化时，Vue会自动更新视图。下面是一个简单的例子：

<template>
  <table>
    <tr v-for="(item, index) in items" :key="index">
      <td>{{ item.name }}</td> <!-- 这里动态展示 item 对象的属性 -->
      <td v-if="item.showDetails">详细信息</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Row 1', showDetails: false },
        { name: 'Row 2', showDetails: true },
        // 更多行...
      ]
    };
  }
};
</script>

在这个例子中，`v-for`指令用于遍历数组 `items` 中的每个元素，并生成一个表格行。`v-if`指令则用于条件渲染第二列的 "详细信息" 标签，如果对应的对象的 `showDetails` 属性为 `true`。

当你在 JavaScript 中修改 `items` 数组，例如添加、删除或改变某个对象的状态，Vue会自动更新表格显示相应的变化。这就是 Vue 动态创建表格的基本原理。