Vue Element UI动态表格：添加、删除、数据校验、回显

您可以使用Element UI中的Table组件来实现动态添加行、删除行、数据提交校验和回显的功能。\n\n首先，在Vue组件中引入Table组件和相关的方法：\n\nvue\n<template>\n <div>\n <el-button type="primary" @click="addRow">添加行</el-button>\n <el-table :data="tableData" ref="table" style="width: 100%; margin-top: 20px;">\n <el-table-column type="index" label="序号"></el-table-column>\n <el-table-column label="起始日期">\n <template slot-scope="scope">\n <el-date-picker v-model="scope.row.q" type="date" placeholder="选择日期"></el-date-picker>\n </template>\n </el-table-column>\n <el-table-column label="终止日期">\n <template slot-scope="scope">\n <el-date-picker v-model="scope.row.z" type="date" placeholder="选择日期"></el-date-picker>\n </template>\n </el-table-column>\n <el-table-column label="收取比例">\n <template slot-scope="scope">\n <el-input v-model="scope.row.costRatio" placeholder="请输入收取比例"></el-input>\n </template>\n </el-table-column>\n <el-table-column label="操作">\n <template slot-scope="scope">\n <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.$index)">删除</el-button>\n </template>\n </el-table-column>\n </el-table>\n <el-button type="primary" @click="submit">提交</el-button>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n tableData: [\n // 初始化一行数据\n {\n q: '',\n z: '',\n costRatio: ''\n }\n ]\n };\n },\n methods: {\n addRow() {\n this.tableData.push({\n q: '',\n z: '',\n costRatio: ''\n });\n },\n deleteRow(index) {\n this.tableData.splice(index, 1);\n },\n submit() {\n // 校验数据\n if (this.validateData()) {\n // 提交数据\n // ...\n }\n },\n validateData() {\n // 进行数据校验\n // ...\n return true; // 校验通过返回true，否则返回false\n }\n }\n};\n</script>\n\n\n上述代码中，我们使用el-table来展示动态添加的行数据，通过v-model指令绑定每一行数据的具体字段。使用el-button实现添加行、删除行和提交操作。在提交操作中，可以调用validateData方法进行数据校验，校验通过后再进行数据提交。\n\n其中，el-table-column中的type="index"实现了自动序号的功能，slot-scope可以获取当前行的数据和索引信息。\n\n需要注意的是，起始日期字段使用了scope.row.q，终止日期字段使用了scope.row.z，收取比例字段使用了scope.row.costRatio，这样才能正确绑定每一行的数据。\n\n另外，您可以根据实际需求来进行数据校验的逻辑实现，比如判断起始日期是否小于终止日期、收取比例是否符合要求等。