Requirement: the user can edit the form without actually making changes to the save interface

Logic: Click edit to get the form data and compare it with the form data edited by the user. If the data is the same, disable the save button; otherwise, follow the normal logic and listen the form.

Implementation:

  • The save button is clickable by default
  • If the save button is the same as that of the edited form, it cannot be clicked

Since forms are objects, compare two objects and convert them to strings (this is also problematic when the keys of two objects are in different order). You can also use the lodash _. Equal method,

Stackoverflow.com/questions/2…

<template> <el-form> <el-col :span="24"> <el-form-item label=" response name "style="margin-top: 20px"> <el-input v-model="ResponseList.name" :readonly="compileOne" clearable size="small" /> </el-form-item> </el-col> "El - col: span =" 12 "> < el - form - the item label =" event number > "< el - input v - model =" ResponseList. BusinessNumber readonly "size =" small "/ > </el-form-item> </el-col> < EL-col :span="12"> <el-form-item label=" response time "> < EL-input size="small" v-model="ResponseList.createTime" readonly ></el-input> </el-form-item> </el-col> </el-form> <el-button V-if ="isEditShow" type="primary" size="small" @click="edit" </el-button> <el-button v-if="isSaveCancelShow" Type ="primary" size="small" @click="getSaveNull" :disabled="isFormSaveEnable" > </el-button> </template> data() { Return {isFormSaveEnable: false, // Save button is disabled by default}}, methods: Then ((res) => {let obj = res.data // Let obj = res.data // Let obj = res.data // Object.keys(obj). ForEach (function(key) {if(obj[key] === null) {obj[key] = "; } }) this.ResponseList = obj; // this.ResponseList.duty ?? = ' '; this.formCopy = JSON.stringify(this.ResponseList); },}, watch: {ResponseList: { handler() { if(JSON.stringify(this.ResponseList) === this.formCopy){ this.isFormSaveEnable = true } else { this.isFormSaveEnable = false; } }, // useful to watch deeply nested properties on a data variable deep: true, }, }Copy the code