需求:点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存。
目录
代码
data
methods
实现效果
添加行 { scope.row.index }} 显示在输入框的下面--> { scope.row.riskPointName }}--> { scope.row.riskLevel }}--> { scope.row.hiddenDanger }}--> { scope.row.type }}--> { scope.row.accident }}--> { scope.row.remark }}--> 删除 提交
data(){ return{ //录入数据字典资产信息 dataId: 1, //数据字典资产信息的集合 tableData: [], //数据字典资产信息录入 openDataDictionary: false, //数据字典资产信息录入弹出框标题 titleDataDictionary: "", } }
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; }); },