美文网首页
vue watch监听form表单内容是否变更

vue watch监听form表单内容是否变更

作者: web30 | 来源:发表于2021-09-18 18:01 被阅读0次

1.监听form表单是否有变更

效果图
<el-dialog>
  <el-form-item label="审方方式:" prop="departCheck" label-width="100px">
     <el-checkbox v-model="departAddForm.departAutoCheck">自动审方</el-checkbox>
     <el-checkbox v-model="departAddForm.departPerCheck">人工审方</el-checkbox>
   </el-form-item>
</<el-dialog>

data(){
  return{
    departAddForm:{
      departAutoCheck: '',
      departPerCheck: ''
    },
    flagchange: 0, // 默认值
    isChange: '', // 表单值是否有改变
  }
},
watch:{
  // 监听编辑是否有修改 - departAddForm
    departAddForm: {
      handler(val) {
        if (this.trialAwayType === 'edit') { // 等于编辑时才去监听
          this.flagchange++  // 默认值有变更的话
          if (this.flagchange > 1) { // 说明监听值有变化
            this.isChange = true  // 弹框提示
          }
        }
      },
      deep: true,// 深度监听
    }
},
methods:{
  // 点击表格编辑弹框,只写重要的代码,其它代码不贴了
  onEditDepart(row) {
    // 初始化检测数据
    this.isChange = false
    this.flagchange = 0
  },
save(){
    // 判断是否有更改
          if (this.isChange) {
            this.$confirm('是否确定保存本次修改内容?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              await this.$requestInternet.post('/api/xxxx', {
                pid: this.pId
              })
              this.$message.success('修改成功')
              this.onDepartSearch()
            })
          }
  }
}

2.监听某一项是否有变更(日期前缀)

监听某一项
<el-form ref="rowDetail" :model="rowDetail" :rules="rules">
  <el-form-item label="日期前缀:" prop="rqqz" label-width="100px">
          <el-radio-group v-model="rowDetail.rqqz">
            <el-radio label="yyyyMMdd">yyyyMMdd</el-radio>
            <el-radio label="yyMMdd">yyMMdd</el-radio>
            <el-radio label="">无</el-radio>
          </el-radio-group>
  </el-form-item>
  <el-form-item label="复位周期:" prop="fwlx" label-width="100px">
          <el-radio-group v-model="rowDetail.fwlx">
            <el-radio :label="1" :disabled="!rqqz">每天</el-radio>
            <el-radio :label="0">不复位</el-radio>
          </el-radio-group>
   </el-form-item>
</el-form>
data(){
  return{
    rowDetail: {
        rqqz: '',
        fwlx: '',
      }
  }
},
computed: {
    rqqz() {
      return this.rowDetail.rqqz
    }
  },
  watch: {
    rqqz(val) {
      if (val == '') {
        this.rowDetail.fwlx = 0
      }
    }
  },

相关文章

网友评论

      本文标题:vue watch监听form表单内容是否变更

      本文链接:https://www.haomeiwen.com/subject/udlygltx.html