vue3 elementplus 怎么实现动态添加一行

在Vue3中使用ElementPlus实现动态添加表格行通常涉及以下几个步骤：

1. **准备模板**：
在你的HTML模板中，创建一个可以动态添加行的表格结构，并包含一个按钮或者其他触发动态增删操作的元素。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <!-- 其他列 -->
  </el-table>
  <button @click="addRow">新增行</button>
</template>

2. **数据管理**：
创建一个数组`tableData`来存储表格的数据，每条数据代表一行。

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        // ...
      ],
      newRow: {}, // 新建行的初始值
    };
  },
}

3. **处理事件**：
在`methods`中定义`addRow`函数，通过`.push()`方法将新的数据项添加到`tableData`数组中，同时更新新行的状态。

methods: {
  addRow() {
    this.tableData.push({ ...this.newRow });
    this.newRow = {}; // 清空新行，避免重复添加
  }
}

每次点击“新增行”按钮时，都会在表格底部增加一行。你可以根据需要修改`newRow`的内容，如从表单获取数据等。