vue element ui动态添加行、删除行、数据提交做校验、回显字段有起q、至z、收取比例costRatio自动序号不作为字段提交

您可以使用Element UI中的Table组件来实现动态添加行、删除行、数据提交校验和回显的功能。

首先，在Vue组件中引入Table组件和相关的方法：

<template>
  <div>
    <el-button type="primary" @click="addRow">添加行</el-button>
    <el-table :data="tableData" ref="table" style="width: 100%; margin-top: 20px;">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="起始日期">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.q" type="date" placeholder="选择日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="终止日期">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.z" type="date" placeholder="选择日期"></el-date-picker>
        </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="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 初始化一行数据
        {
          q: '',
          z: '',
          costRatio: ''
        }
      ]
    };
  },
  methods: {
    addRow() {
      this.tableData.push({
        q: '',
        z: '',
        costRatio: ''
      });
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    submit() {
      // 校验数据
      if (this.validateData()) {
        // 提交数据
        // ...
      }
    },
    validateData() {
      // 进行数据校验
      // ...
      return true; // 校验通过返回true，否则返回false
    }
  }
};
</script>

上述代码中，我们使用el-table来展示动态添加的行数据，通过v-model指令绑定每一行数据的具体字段。使用el-button实现添加行、删除行和提交操作。在提交操作中，可以调用validateData方法进行数据校验，校验通过后再进行数据提交。

其中，el-table-column中的type="index"实现了自动序号的功能，slot-scope可以获取当前行的数据和索引信息。

需要注意的是，起始日期字段使用了scope.row.q，终止日期字段使用了scope.row.z，收取比例字段使用了scope.row.costRatio，这样才能正确绑定每一行的数据。

另外，您可以根据实际需求来进行数据校验的逻辑实现，比如判断起始日期是否小于终止日期、收取比例是否符合要求等