Vue Element UI 动态表格：添加、删除、提交和回显数据

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column label="Operation">
        <template slot-scope="scope">
          <el-button size="small" @click="deleteRow(scope.$index)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
<pre><code>&lt;el-button type=&quot;primary&quot; @click=&quot;addRow&quot;&gt;Add Row&lt;/el-button&gt;
&lt;el-button type=&quot;success&quot; @click=&quot;submitData&quot;&gt;Submit&lt;/el-button&gt;
</code></pre>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Alex', age: 25 },
        { name: 'Jessica', age: 30 }
      ]
    }
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', age: '' });
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    submitData() {
      // Submit data to server
      console.log(this.tableData);
    }
  }
}
</script>
<p>上述代码中，<code>tableData</code>是一个数组，用于存储表格中的数据。<code>addRow</code>方法用于添加一行数据，通过<code>push</code>方法将一个空对象添加到<code>tableData</code>数组中。<code>deleteRow</code>方法用于删除指定索引的行，通过<code>splice</code>方法将指定索引的行从<code>tableData</code>数组中删除。<code>submitData</code>方法用于提交数据到服务器，这里只是简单地打印出<code>tableData</code>数组内容。</p>
<p>您可以根据自己的需求修改代码，实现更复杂的功能，比如数据的回显等。</p>