Vue(ElementUI)监听e-input输入框，完成编辑判断数据是否修改

Vue监听e-input输入框使用@input

<el-input v-model.trim="dialogForm.name" autocomplete="off" @input="handlerChange"></el-input>

 method里声明方法

handlerChange(e) {
    console.log(e)
}

 

每次input框的数据发生改变，该函数都会执行一次，那么我们可以通过这个特性来 判断表单的数据有没有修改​​​​​​​

第一步：给表单中的e-input绑定监听事件

<el-form :model="dialogForm" :rules="rules" ref="dialogForm">
    <el-input type="hidden" v-model="dialogForm.id" autocomplete="off"></el-input>
    <el-form-item prop="name" label="政策分类名称" :label-width="dialogFormLabelWidth">
    <el-input v-model.trim="dialogForm.name" autocomplete="off" @input="handlerChange"></el-input>
    </el-form-item>
</el-form>
<template #footer>
    <span class="dialog-footer">     
        <el-button
            class="subss"
            type="primary"
            @click="submit()"
            >保 存</el-button
          >
        <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
</template>

注意：只给会变得数据绑定，这里得id是隐藏的el-input，就不需要监听，如果存在多个数据需要监听，可以给每个数据都绑定@input=“handlerChange”

第二步：在data内声明一个Boolean型变量

data() {
  return {
    isRewiriteEditor: false,//标志input框是否修改
  }
}

 第三步：重写监听函数

handlerChange(e) {
  console.log(e)
  this.isRewiriteEditor = true;
}

如果监听函数执行，说明数据改变了，这时候修改标志变成true，用来做后续的判断

第四步：修改提交函数

submit() {
    if (this.isRewiriteEditor)  {
        api.queryTotalTest(param).then((res) => {
            const { data } = res;
            this.row2List1 = data;
        });
        this.isRewiriteEditor = false;
    }else if (valid && this.checkDialogForm() && !this.isRewiriteEditor){
        this.$message.warning('数据没有修改，请先修改数据在提交');
    } else {
        console.log('error submit!!');
        return false;
    }
},

在执行接口请求前，判断isRewiriteEditor的值，如果修改了（true），才发起ajax请求，如果没有修改（false），提醒数据没有修改

注意：发起修改请求后，要把isRewiriteEditor的值置为false，也就是默认没修改的状态

效果如下：

 原文章：Vue(ElementUI)监听e-input输入框，完成编辑判断数据是否修改_nianyuw的博客-CSDN博客_vue监听输入框变化