<li><span>身份证号:</span>
<span class="InstantEdit" v-if="editVis.idCard">
<el-form :inline="true" class="demo-form-inline">
<el-form-item >
<el-input placeholder="请输入" v-model="responseData.idCard"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-check" @click="updateEdit('idCard')"></el-button>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-close" @click="cancelEdit('idCard')" ></el-button>
</el-form-item>
</el-form>
</span>
<span @click="editVis.idCard=!editVis.idCard" class="underline" v-else>{{responseData.idCard}}</span>
</li>
js
export default {
data() {
return {
responseData: '',
editVis:{
idCard:false,
userName: false,
jobNum: false,
},
original: '',
}
},
created() {
const id = this.$route.params && this.$route.params.id
this.fetchData(id)
},
methods: {
fetchData(id) {
fetchArticle(id).then(response => {
this.responseData = response.data,
this.original = Object.assign({}, this.responseData) // 拷贝内容到original
}).catch(err => {
console.log(err)
})
},
// 取消编辑
cancelEdit(val) {
this.responseData.idCard = this.original.idCard, //如果取消,界面数据恢复到以前
this.editVis[val]= false
// this.$message({
// message: 'The title has been restored to the original value',
// type: 'warning'
// })
},
// 修改
updateEdit(val) {
this.editVis[val]= false
this.$message({
message: '修改成功!',
type: 'success'
})
},
}
}
原理:
1.初始化编辑内容不可见
editVis:{
idCard:false
},
2.点击内容,编辑内容可见 @click="editVis.idCard=!editVis.idCard"
3.点击确认编辑,调用事件 @click="updateEdit('idCard')"
// 修改
updateEdit(val) {
this.editVis[val]= false
this.$message({
message: '修改成功!',
type: 'success'
})
},
4.取消,调用事件@click="cancelEdit('idCard')"
// 取消编辑
cancelEdit(val) {
this.responseData.idCard = this.original.idCard,
this.editVis[val]= false
// this.$message({
// message: 'The title has been restored to the original value',
// type: 'warning'
// })
},