vue中表格的添加和删除功能代码

在Vue.js中实现表格的添加和删除功能，通常会配合Vue的响应式特性、事件处理以及数据管理。这里是一个简单的例子：

首先，假设我们有一个`data`数组来存储表格的数据，并有一个`addRow`和`deleteRow`方法分别用于添加和删除行。

<!-- HTML部分 -->
<table>
  <tr v-for="(item, index) in items" :key="index">
    <!-- 表格列 -->
    <td @click="editRow(index)">编辑</td>
    <td @click="deleteRow(index)">删除</td>
  </tr>
  <tr>
    <td><input type="text" v-model="newItem" placeholder="添加新行"></td>
    <td><button @click="addRow">添加</button></td>
  </tr>
</table>

对应的Vue组件代码：

<template>
  <!-- ... -->
</template>

<script>
export default {
  data() {
    return {
      items: [], // 存储当前表格数据
      newItem: '', // 新增行的内容
    };
  },
  methods: {
    addRow() {
      if (this.newItem.trim()) { // 检查输入是否为空
        this.items.push({ content: this.newItem }); // 添加新行
        this.newItem = ''; // 清空输入框
      }
    },
    deleteRow(index) {
      this.items.splice(index, 1); // 删除指定索引的行
    },
    editRow(index) {
      // 开始编辑模式，比如显示一个模态框或者修改行的内容
    },
  },
};
</script>

在这个示例中，当点击“添加”按钮，新的行会被追加到`items`数组；点击单元格，会触发`editRow`方法开始编辑操作；点击删除按钮，则会调用`deleteRow`方法移除对应行。