vue 点击按钮动态插入一行表格的tr

在Vue.js中，要实现点击按钮动态插入一行表格（<tr>标签），你可以利用JavaScript事件处理结合v-for指令。首先，你需要创建一个数组来存储表格数据，然后在模板中绑定这个数组。当点击按钮时，可以使用`this.$refs`获取对应的元素并添加新的数据项。

以下是一个简单的示例：

<!-- HTML模板 -->
<table>
  <thead>
    <!-- 表头... -->
  </thead>
  <tbody ref="tableBody">
    <tr v-for="(item, index) in tableData" :key="index">
      <!-- 表格每一行的元素... -->
    </tr>
  </tbody>
</table>

<button @click="addRow">添加新行</button>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始的空数组
    };
  },
  methods: {
    addRow() {
      const newRow = {} 或者你想添加的数据结构;
      this.tableData.push(newRow); // 添加新数据到数组
      // 如果你想要更新视图，可以考虑使用$nextTick，因为DOM更新有时需要一些时间
      this.$nextTick(() => {
        // 获取表格tbody元素并追加新行
        const tbody = this.$refs.tableBody;
        tbody.insertAdjacentHTML('beforeend', `<tr><td>${newRow.column1}</td><td>${newRow.column2}</td></tr>`); // 替换column1和column2为实际列名
      });
    },
  },
};
</script>

在这个例子中，`@click="addRow"`监听了按钮的点击事件，当你点击时会调用`addRow`方法。每行数据都是从`tableData`数组中渲染出来的。当你添加新行后，通过`insertAdjacentHTML`方法动态插入新行到表格最后。