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

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

method里声明方法

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

image-20220717170615507

每次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>

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

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

isRewiriteEditor: false,//标志input框是否修改

第三步:重写监听函数

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

如果监听函数执行,说明数据改变了,这时候修改标志变成true

第四步:修改提交函数

saveOrUpdate: function () {
    this.$refs['dialogForm'].validate((valid) => {
        if (valid && this.checkDialogForm() && this.isRewiriteEditor)  {
            this.axios({
                method: 'POST',
                url: this.$data.urls.saveOrUpdate,
                data: this.dialogForm
            }).then(res => {
                let code = res.data.code
                if (code == 200) {
                    this.pageList();
                    this.$data.dialogAddFormVisible = false
                    this.isRewiriteEditor = false;
                } else if (code == 20004) {
                    this.$message.error('请先修改数据在更新');
                } else if (code == 20003) {
                    this.$message.warning('数据已经存在,请先修改数据在提交');
                }
            }).catch(error => {
                console.log(error);
            });
        }else if (valid && this.checkDialogForm() && !this.isRewiriteEditor){
            this.$message.warning('数据没有修改,请先修改数据在提交');
        } else {
            console.log('error submit!!');
            return false;
        }
    });
},

在执行ajax请求前,判断isRewiriteEditor的值,如果修改了(true),才发起ajax请求,如果没有修改(false),提醒数据没有修改

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

效果如下:

image-20220717172043097

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐