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

可以使用 Vue 的动态数据绑定和 Element UI 的表格组件来实现动态添加行、删除行、数据提交和回显功能。

首先，在 Vue 的 data 中定义一个数组来存储表格的数据：

data() {
  return {
    tableData: [
      { q: '', z: '', cost_ratio: '' }
    ]
  }
}

然后，使用 Element UI 的表格组件来显示数据：

<el-table :data="tableData">
  <el-table-column prop="q" label="起"></el-table-column>
  <el-table-column prop="z" label="至"></el-table-column>
  <el-table-column prop="cost_ratio" label="收取比例"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" size="small" @click="removeRow(scope.$index)">
        删除
      </el-button>
    </template>
  </el-table-column>
</el-table>

添加行时，可以通过点击按钮来触发一个方法，在该方法中向 tableData 数组中添加一个空对象：

methods: {
  addRow() {
    this.tableData.push({ q: '', z: '', cost_ratio: '' });
  },
  removeRow(index) {
    this.tableData.splice(index, 1);
  }
}

提交数据时，可以将 tableData 数组中的数据提交给后端：

methods: {
  submitData() {
    // 将 tableData 数组提交给后端
  }
}

回显数据时，可以将后端返回的数据赋值给 tableData 数组：

methods: {
  fetchData() {
    // 从后端获取数据
    // 将获取到的数据赋值给 tableData 数组
  }
}

最后，自动序号可以使用 Vue 的计算属性来实现，在表格中添加一个序号列：

<el-table-column label="序号">
  <template slot-scope="scope">
    {{ scope.$index + 1 }}
  </template>
</el-table-column>

这样，就实现了动态添加行、删除行、数据提交和回显的功能。