<el-button class="buttonInfo" size="small" @click="updataMethod(scope.$index,scope.row)">编辑</el-button>updataMethod(index, rowData) { this.dialogEdittVisible = true this.$nextTick(() => { this.dialogType = 'editProjectOne' this.formEditTitle = '编辑' this.formEdit = Object.assign({}, rowData) this.getMbsj() }) }, getTarget() { if (this.formList.indexName == null || this.formList.indexName == '') { this.$message('请选择分项') return false } if (this.itemize == null || this.itemize == '') { this.$message('请选择总量') return false } this.$ajax({ url: '/lims/projectLib/project_item', method: 'post', data: { name: this.formList.indexName, tableData: this.selectedData, }, }).then(res => { if (res.data.code === 200) { this.$message({ message: '添加成功', center: true, type: 'success', }) this.dialogEdittVisible = false this.getList() } else { this.$message({ message: res.data.msg, center: true, type: 'error', }) this.dialogEdittVisible = false } }) },点击编辑按钮时如何显示编辑之前的数据
时间: 2023-07-15 20:14:41 浏览: 105
根据你提供的代码,可以看出编辑按钮点击后会触发 `updataMethod` 方法,该方法会将 `dialogEdittVisible` 设置为 `true`,从而显示编辑弹窗。同时,会将 `formEdit` 对象赋值为当前行数据的拷贝,用于编辑之前的数据展示。
你可以在弹窗中使用 `formEdit` 对象的属性来展示编辑之前的数据。例如,在弹窗中展示名称可以这样写:
```html
<el-form-item label="名称">
<el-input v-model="formEdit.name"></el-input>
</el-form-item>
```
这里假设当前行数据对象中有一个名为 `name` 的属性。你可以根据实际情况调整代码。
相关问题
<el-table-column min-width="30px" prop="setValue" label="参数值" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-input v-if="isEdit == scope.$index" v-model="scope.row.value" placeholder="请输入内容" style="text-align: center;" class="edit-input" size="small"></el-input> <el-button v-if="isEdit == scope.$index" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="handleDelete(scope.$index, scope.row)">确定</el-button> <span v-if="isEdit != scope.$index">{{ scope.row.value }}</span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> </template> </el-table-column>这段代码中如何判断输入框内容是否为空,以及更新输入框内容
在这段代码中,可以通过判断 `scope.row.value` 是否为空来判断输入框内容是否为空。当用户点击确定按钮时,会调用 `handleDelete` 方法,该方法将根据当前编辑的行数和行数据更新输入框内容。
具体实现方法如下:
1. 在 `handleDelete` 方法中,添加判断输入框内容是否为空的逻辑:
```javascript
handleDelete(index, row) {
if (!row.value) {
this.$message.warning('内容不能为空');
return;
}
// 更新输入框内容
this.isEdit = -1;
},
```
2. 在 `el-input` 组件中添加 `v-model.trim` 属性,用于去掉输入内容两端的空格:
```html
<el-input v-if="isEdit == scope.$index" v-model.trim="scope.row.value" placeholder="请输入内容"
style="text-align: center;" class="edit-input" size="small"></el-input>
```
这样可以确保用户输入的内容不仅仅是空格。
3. 在 `mounted` 钩子函数中,添加 `watch` 监听 `this.tableData` 的变化,如果有任何行中的值为空,则禁用保存按钮:
```javascript
mounted() {
this.$nextTick(() => {
this.$watch('tableData', (newVal) => {
this.isDisabled = newVal.some(item => item.value === '');
}, { deep: true });
});
},
```
在 `tableData` 中任意一行的 `value` 为空时,`this.isDisabled` 将被设置为 `true`,保存按钮将被禁用。
<el-table-column min-width="30px" prop="setValue" label="参数值" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-input v-if="isEdit == scope.$index" v-model="scope.row.value" placeholder="请输入内容" style="text-align: center;" class="edit-input" size="small"></el-input> <el-button v-if="isEdit == scope.$index" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="handleDelete(scope.$index, scope.row)">确定</el-button> <span v-if="isEdit != scope.$index">{{ scope.row.value }}</span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> </template> </el-table-column>这段代码中如何实现判断输入框内容为空时,提示不能为空且不退出编辑文本
你可以在点击确定按钮时,先判断输入框中的内容是否为空,如果为空,则提示不能为空,不退出编辑框;否则保存修改并退出编辑框。
可以在确定按钮的点击事件中添加如下代码:
```javascript
if (!scope.row.value) {
this.$message({
message: '不能为空',
type: 'warning'
});
return;
}
// 保存修改的代码
this.isEdit = -1; // 退出编辑框
```
其中,`this.$message` 是 Element UI 中的消息提示组件,用于在页面上显示提示信息。
阅读全文