实现效果:
对某条数据进行数据修改
步骤:
1、添加单选按钮:(点击获取该条信息的id,并将id传给修改按钮)
div.
1、修改按钮
<span size="mini" @click="handleItem" v-loading="loadingButton">修改信息</span>
2、列表单选按钮
<el-table
size="mini"
:data="listData"
class="mod-table"
border
stripe
ref="tableData"
@row-click="single">
<el-table-column label="" width="40">
<template slot-scope="scope">
<el-radio class="radio" v-model="templateSelection" :label="scope.row.id"><i></i></el-radio>
</template>
</el-table-column>
</el-table>
3、修改页面
<div v-if="isChoose" class="modalBox">
<div class="formBox">
<div class="modalHeaderBox">
<span>修改项目信息</span>
<i @click="escReset"/>
</div>
<div class="middleBox">
<el-form :label-position="'left'" :inline="true" :model="middle" size="medium">
<el-form-item label="管理类别">
<el-select v-model="middle.manageValue" placeholder="请选择管理类别">
<el-option
v-for="item in manageValue"
:key="item.code"
:label="item.value"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div class="confirmBox">
<el-button @click="reset">关闭</el-button>
<el-button @click="goInfo()">确认</el-button>
</div>
</div>
</div>
date.
return {
templateSelection: '',
radio: '',
isChoose: false,
}
methods.
// 单击获取id
single (row) {
this.radio = row.id;
},
// 修改信息
handleItem(){
if(this.radio === ''){
return this.$message.warning("请选择需要修改的项目信息!")
}
this.isChoose = true
let response = this.$api.item.itemById(this.radio);// 根据id查询信息
if(response.code == 200){
this.middle= response.data;
}
},
// 点击确认按钮
goInfo() {
this.file =
{
id: this.radio,
.
.
.
写需要修改的参数
};
let res = this.$api.item.getInfoById(this.file);// 修改的接口
if (res.code == 200) {
this.$message.success("修改成功!");
this.isChoose = false;
this.getList(); //获取列表数据
} else {
this.$message.error(res);
}
},
// 关闭弹框
reset() {
this.isChoose = false;
this.filters = {
itemName: '', //项目名称
.
.
.
写修改的参数为空,情况内容的操作
};
},
遇到的坑
这里面有关联字段,比如manageCode和 manageValue(及相应的code值对应的value值)之前后端没有告诉我哈,我花啦好长时间整理,因为我传参的时候,并不知道有这种关联关系,导致我做了很多判断语句,嘿嘿,尴尬!!
原代码:
1、修改页面回显数据
<el-form-item label="管理类别">
<el-select v-model="middle.manageCode" placeholder="请选择管理类别">
<el-option
v-for="item in manageValue"
:key="item.code"
:label="item.value"
:value="item">
</el-option>
</el-select>
</el-form-item>
导致传参时就出现传value后,详情回显数据获取的却是code值,所以想到它应该是有关联的,然后又遇到这边后台的一个问题,他们的处理方式是无误是否修改,都会将所有参数全部传递给后台,所以就需要我们做个判断,如何不是修改的内容,就要将详情原有数据传递回去
注意:
参数当中判断是否有对象时 开始用typeof发现并没有什么效果,后来用啦
Object.prototype.toString.call(obj) === "[object Object]"
示例:
manageValue: this.middle.manageValue != undefined ? Object.prototype.toString.call(this.middle.manageValue) === '[object Object]' ? this.middle.manageValue.value : this.middle.manageValue : "",