【前端】vue采用el-table 添加行手动填写数据和删除行及提交

需求：点击新增按钮实现下列弹窗的效果，点击添加行新增一行，点击删除进行删除行，点击提交将数据传递到后端进行保存。

目录

代码

data

methods

实现效果

代码

添加行<!--{{ scope.row.index }}显示在输入框的下面--><!-- 序号 --><!--{{ scope.row.riskPointName }}--><!--{{ scope.row.riskLevel }}--><!--{{ scope.row.hiddenDanger }}--><!--{{ scope.row.type }}--><!--{{ scope.row.accident }}--><!--{{ scope.row.remark }}-->删除提交

data

data(){return{//录入数据字典资产信息dataId: 1,//数据字典资产信息的集合tableData: [],//数据字典资产信息录入openDataDictionary: false,//数据字典资产信息录入弹出框标题titleDataDictionary: "",}}

methods

methods: {/** 删除按钮操作 */handleDeleteDataDictionary(index, rows) {alert("index" + index);//这个index就是当前行的索引坐标this.$modal.confirm('是否删除当前行？').then(function () {rows.splice(index, 1); //对tableData中的数据删除一行}).then(() => {this.$modal.msgSuccess("删除成功");}).catch(() => {});},// 添加行addDemo() {var d = {index: this.dataId++,assetNo: "", //资产编号实时回显riskSourceName: "",riskLevel: "",riskPointName: "",type: "",hiddenDanger: "",dangerLevel: "",accident: "",remark: ""};this.tableData.push(d);setTimeout(() => {this.$refs.demoTable.setCurrentRow(d);}, 10);},/** * 数据字典资产信息录入点击提交执行的方法 * */handleDataDictionaryAssetInfo() {addDataDictionaryAssetInfo(this.tableData).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;});},