即时编辑

<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'
      // })
    },