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

<template>
  <div>
    <el-button type="primary" @click="addRow">添加行</el-button>
    <el-table :data="tableData" style="margin-top: 20px">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="起点">
        <template slot-scope="scope">
          <el-input v-model="scope.row.q" placeholder="请输入起点"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="终点">
        <template slot-scope="scope">
          <el-input v-model="scope.row.z" placeholder="请输入终点"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="收取比例">
        <template slot-scope="scope">
          <el-input v-model="scope.row.costRatio" placeholder="请输入收取比例"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submitData">提交</el-button>
    <el-table v-if="submittedData" :data="submittedData" style="margin-top: 20px">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="起点">
        <template slot-scope="scope">
          <span>{{ scope.row.q }}</span>
        </template>
      </el-table-column>
      <el-table-column label="终点">
        <template slot-scope="scope">
          <span>{{ scope.row.z }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收取比例">
        <template slot-scope="scope">
          <span>{{ scope.row.costRatio }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        submittedData: null
      };
    },
    methods: {
      addRow() {
        this.tableData.push({
          q: '',
          z: '',
          costRatio: ''
        });
      },
      deleteRow(index) {
        this.tableData.splice(index, 1);
      },
      submitData() {
        // 做数据提交的逻辑，这里只是简单地将表格数据赋值给submittedData
        this.submittedData = JSON.parse(JSON.stringify(this.tableData));
      }
    }
  };
</script>
<p>使用 &lt;'el-table'&gt; 和 &lt;'el-table-column'&gt; 组件创建动态表格。通过 &lt;'v-model'&gt; 指令，可以将表格中的输入框与 &lt;'tableData'&gt; 中的数据进行双向绑定。</p>
<p>点击“添加行”按钮，会调用 &lt;'addRow'&gt; 方法，在 &lt;'tableData'&gt; 数组中添加一条空数据，表格会自动添加一行。</p>
<p>点击每一行的删除按钮，会调用 &lt;'deleteRow'&gt; 方法，根据当前行的索引从 &lt;'tableData'&gt; 数组中删除对应的数据，表格会自动删除该行。</p>
<p>点击“提交”按钮，会调用 &lt;'submitData'&gt; 方法，将 &lt;'tableData'&gt; 数组中的数据提交到后端，并将返回的数据赋值给 &lt;'submittedData'&gt;，然后在页面上回显提交的数据。</p>
<p>请注意，&lt;'submittedData'&gt; 只是一个示例，实际情况中，你需要根据实际需求做相应的数据提交和回显的处理。</p>