el-table动态添加行

el-table是Element UI库中的一个表格组件，可以用来展示数据，并支持添加新的行。

在el-table中动态添加行有两个主要步骤：

1. 添加行数据：首先，我们需要在前端代码中定义一个数组，用来存储表格的数据。可以将这个数组绑定到el-table的:data属性上，这样就可以将数据渲染到表格中。当需要添加新的行时，只需往这个数组中添加一个新的对象，该对象的属性对应表格的列，值对应每列的具体数据。

2. 添加行操作：通过一个按钮或其他交互方式，触发添加行的操作。当点击按钮时，会触发一个处理函数，在该函数中，我们可以使用Vue的数组方法如push()来向数据数组中添加一个新的对象，从而实现动态添加行的效果。同时，添加行时可能需要在前端做一些数据校验，确保输入符合要求。

下面是一个简单的示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格的列定义 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <!-- 添加新行的按钮 -->
    <el-button @click="addRow">添加行</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 18 },
        { name: "李四", age: 20 },
      ],
    };
  },
  methods: {
    addRow() {
      this.tableData.push({ name: "", age: "" });
    },
  },
};
</script>

以上代码演示了如何动态添加行。每点击一次“添加行”按钮，就会在tableData数组中添加一个新的对象，从而在表格中显示一行空数据。

通过以上步骤，我们可以实现el-table的动态添加行功能。