vue3删除表格元素

在 Vue3 中，当你需要从表格中删除某个元素时，通常会配合 `v-for`、`ref` 和事件处理函数来操作。这里是一个简单的例子：

假设你有一个表格，数据来自一个数组 `items`，每个表格项都是一个 `Item` 对象，并且有一个 `delete` 方法用于删除该项：

<template>
  <table>
    <tr v-for="(item, index) in items" :key="index">
      <!-- 表格内容 -->
      <td>{{ item.name }}</td>
      <td @click.prevent="deleteItem(index)">删除</td> <!-- 添加删除按钮并绑定事件 -->
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 初始化为空数组
    };
  },
  methods: {
    deleteItem(index) { 
      this.items.splice(index, 1); // 使用数组的 splice 方法删除指定位置的元素
    },
  },
};
</script>

在这个例子中，点击 "删除" 按钮时，`deleteItem` 方法会被触发，它通过数组的 `splice` 方法移除对应索引的元素，从而从表格中删除该行。