el-dialog中，el-form中表单信息未收集齐全时禁用提交按钮，动态控制按钮是否禁用

最新推荐文章于 2024-07-09 10:31:03 发布

原创最新推荐文章于 2024-07-09 10:31:03 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

前端学习同时被 2 个专栏收录

38 篇文章

订阅专栏

项目笔记

23 篇文章

订阅专栏

在Vue.js项目中，使用el-dialog组件创建了一个表单。当dialog打开时，如果表单字段为空，提交按钮会被禁用。只有当所有表单项都有内容时，按钮才会变为可点击。这通过watcher监听teacher属性并计算disabled状态来实现。

需求

在el-dialog中放置了一个表单，打开el-dialog时，表单没有收集内容，各项为空，此时表单的提交按钮被禁用，只有每个表单项都收集到内容时，才会将提交按钮设置为可用

预期效果

在这里插入图片描述

解决方案

<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :disabled="disabled">确 定</el-button>

export default{
	name: 'yourDialog',
	props: ['teacher', 'dialogTableVisible','isUpdate'],
	data(){
		return {
			Info: {
				name: '',
				title: '',
				contact: [],
				sex: null,
			}
		}
	},
	watch:{
		teacher(newValue, oldValue){
			if(this.teacher){
				this.Info = this.teacher
			}else{
				this.initForm()
			}
		}
	},
	computed:{
    	disabled() {
      		return Object.values(this.Info).some(value => !Boolean(value))
    	}
  	},
  	methods: {
		initForm(){
        	Object.keys(this.Info).forEach(item => {
          		if(typeof this.Info[item] === 'string'){
            		this.Info[item] = ''
          		}else if(Array.isArray(this.Info[item])){
            		this.Info[item] = []
          		}else {
           		 this.Info[item] = null
          		}
        	})
    	},
    	close(){
      		this.dialogTableVisible = false
      		this.initForm()
    	},
    	handleSubmit() {
    		// your steps
        }
	}
}