vue3+element-plus: el-table表格动态添加或删除行

在Vue 3和Element Plus中，可以使用el-table组件动态添加或删除行。以下是一个简单的示例：

<template>
  <el-button @click="addRow">添加行</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ $index }">
        <el-button @click="removeRow($index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }
]);
 
function addRow() {
  tableData.value.push({
    date: '2016-05-02',
    name: '李小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  });
}
 
function removeRow(index) {
  tableData.value.splice(index, 1);
}
</script>

在这个例子中，tableData是一个响应式数组，它被绑定到el-table的:data属性上。addRow方法用于向tableData数组添加新行，而removeRow方法则通过传入行的索引来删除数组中的对应行。

注意，在实际应用中，你可能需要对数据进行更复杂的处理，例如验证输入、处理异步操作等。这里提供的是一个简化版本，用于演示基本的添加和删除行的功能。