Vue.js点击元素后如何追加HTML？JSON数据表格扩展问题

看起来你在用Vue渲染动态表格，想要点击每行后展开/追加新的<tr>对吧？Vue是数据驱动的框架，咱们最好通过修改数据来实现，而不是直接去操作DOM，这样能保证数据和视图同步。下面给你具体的实现步骤：

1. 给数据添加展开状态标记 #

首先，我们需要给每个firm项加一个状态，用来标记该行是否处于展开状态。你可以在初始化firm数组的时候，给每个对象加上isExpanded属性，默认设为false：

// 假设你的组件data是这样的
data() {
  return {
    firm: [
      // 原有的firm数据，每个项新增isExpanded
      { name: 'ABC', open: '9:00', max: '100', min: '80', close: '95', change: '+5%', trans: '1234', vol: '5678', isExpanded: false },
      // 其他firm项同理
    ]
  }
}

如果不想修改原数据结构，也可以单独用一个数组记录展开行的标识（比如id），不过直接给每个项加状态会更直观。

2. 修改模板结构，添加点击事件和子行 #

在你的表格模板里，给主行绑定点击事件，同时在主行后面渲染可展开的子行：

<tbody>
  <template v-for="f in firm" :key="f.name">
    <!-- 主行，绑定点击事件切换展开状态 -->
    <tr class="main" @click="toggleExpand(f)">
      <td id="ccc">{{ f.name.toUpperCase() }}</td>
      <td>{{ f.open }}</td>
      <td>{{ f.max }}</td>
      <td>{{ f.min }}</td>
      <td>{{ f.close }}</td>
      <td>{{ f.change }}</td>
      <td>{{ f.trans }}</td>
      <td>{{ f.vol }}</td>
    </tr>
    <!-- 点击后追加的子行，用v-if控制显示 -->
    <tr v-if="f.isExpanded" class="sub-row">
      <!-- 用colspan合并所有列，填充你需要的内容 -->
      <td colspan="8">
        这里是点击后追加的新行内容，你可以自定义填充数据，比如该行的详细信息
      </td>
    </tr>
  </template>
</tbody>

3. 实现切换展开的方法 #

在组件的methods里添加切换状态的方法：

methods: {
  toggleExpand(item) {
    // 切换当前行的展开状态
    item.isExpanded = !item.isExpanded;
    
    // 如果需要点击时加载动态数据（比如从接口获取子行内容），可以在这里加逻辑
    // 示例：if (item.isExpanded && !item.subData) { this.fetchSubData(item) }
  }
}

小提示 #

• 尽量避免直接操作DOM：Vue的响应式系统会自动根据数据更新视图，手动修改DOM容易导致数据和视图不同步，引发奇怪的bug。
• 可以给子行加专属样式，比如浅灰色背景，和主行做区分，提升用户体验。
• 如果子行内容需要异步加载，可在toggleExpand里判断，首次展开时调用接口获取数据，再把数据存在item的属性中（比如item.subData），然后渲染到子行里。

内容的提问来源于stack exchange，提问作者Krystian Kazimierczak