用VUE写一个HTML表格，要求点击按钮新增一行并且新增的一行可以编辑

好的，我来帮你写一个示例代码。首先，你需要在Vue组件中定义一个data属性，用来存储表格的数据。然后，你需要在template中使用v-for指令来循环渲染表格，并使用v-model指令来绑定每个单元格的数据。最后，你需要在表格的最后一行添加一个按钮，用来触发新增操作。

下面是示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td><input type="text" v-model="item.name" :disabled="item.disabled"></td>
          <td><input type="text" v-model="item.age" :disabled="item.disabled"></td>
          <td><input type="text" v-model="item.gender" :disabled="item.disabled"></td>
        </tr>
        <tr>
          <td colspan="3">
            <button @click="addRow">新增一行</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18, gender: '男', disabled: true },
        { id: 2, name: '李四', age: 20, gender: '女', disabled: true },
        { id: 3, name: '王五', age: 22, gender: '男', disabled: true },
      ],
    };
  },
  methods: {
    addRow() {
      this.tableData.push({ id: this.tableData.length + 1, name: '', age: '', gender: '', disabled: false });
    },
  },
};
</script>

在这个示例中，我们定义了一个名为tableData的数组，用来存储表格的数据。在表格中，我们使用v-for指令来循环渲染每一行数据，并使用v-model指令来双向绑定每个单元格的数据。最后一行是一个按钮，当用户点击它时，会调用addRow方法来新增一行数据。新增的行中的单元格是可编辑状态，用户可以输入任意值。