实现效果如下:
点击修改,出现输入框,点击确定或取消,输入框消失
实现过程:
html部分
<el-table v-loading="loading" :data="list">
<el-table-column :label="$t('common.index')" type="index" width="60px" />
<el-table-column :label="$t('deviceParams.paramsName')" align="center" prop="name" />
<el-table-column :label="$t('deviceParams.cnname')" align="center" prop="cnname" />
<el-table-column :label="$t('deviceParams.pValue')" align="center" prop="value">
<template slot-scope="scope">
<el-input v-model="scope.row.value :placeholder="$t('deviceParams.pValuePla')" clearable v-if="scope.row.isEdit" />
<span v-else>{
{ scope.row.value }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('common.operate')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-if="!scope.row.isEdit">
{
{ $t("common.editBtn") }}
</el-button>
<el-button size="mini" type="text" v-if="!scope.row.isEdit">
{
{ $t("common.syncBtn") }}
</el-button>
<el-button size="mini" type="text" @click="submitForm(scope.row)" v-if="scope.row.isEdit">
{
{ $t("common.confirmBtn") }}
</el-button>
<el-button size="mini" type="text" @click="cancel(scope.row)" v-if="scope.row.isEdit">
{
{ $t("common.cancelBtn") }}
</el-button>
</template>
</el-table-column>
</el-table>
js部分:
data() {
return {
currentValue: '',
};
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
// 执行查询
getDeviceConfigPage(this.queryParams).then(response => {
this.list = response.data.list.map(res => {
return {
isEdit: false,
...res
}
});
this.total = response.data.total;
this.loading = false;
});
},
/** 取消按钮 */
cancel(row) {
row.isEdit = false;
row.value = this.currentValue;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.currentValue = row.value;
row.isEdit = true;
},
/** 提交按钮 */
submitForm(row) {
let params = JSON.parse(JSON.stringify(row));
updateDeviceConfig(params).then(response => {
this.$modal.msgSuccess(this.$t('common.editSuccess'));
this.getList();
});
},
}