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
}
}
},
网友评论