vue+elementui通用弹窗（新建+编辑）

时间：2023-03-31 21:46:04 vue.js

组件模板*{{col.name}}

取消确定根据传入的数据渲染弹窗内容，数据格式如下cols:[{name:'inputbox',key:'ccc',//提交时对应字段type:'input',//typeisRequire:true//必填},{name:'radiobox',key:'aaa',type:'radio',data:[{label:'1',name:'长城'},{label:'2',name:'长安'}],isRequire:true},{name:'下拉框',key:'bbb',type:'select',data:[{value:'选项1',label:'金饼'},{value:'option2',label:'双皮奶'}],isRequire:true}],componentdataandpropsdata(){return{submitData:{},//提交数据采集dialogShow:false}},props:{//弹出窗口显示/隐藏dialogVisible:{type:Number,default:0},//弹出窗口标题title:String,//自定义样式customClass:String,//数据列cols:{type:Array,default:()=>[]},//编辑时输入初始值数据:{type:Object,default:()=>{}}},组件数据监听watch:{dialogVisible(val){if(val>0){this.dialogShow=true}},data:{handler(val){this.submitData=val},immediate:true},submitData:{//解决切换单选按钮隐藏其他元素的问题//父组件监听单个选择框的值变化时，修改cols的值隐藏和显示元素handler(){这个.$emit('change',this.submitData)},deep:true}}数据提交和校验confirm(){//校验必填letisMust=this.cols.filter(item=>item.isRequire).map(item=>item.key)Object.keys(this.submitData).forEach(key=>{letindex=isMust.indexOf(key)if((index>-1)&&this.submitData[key]!==''&&!!this.submitData[key]){isMust.splice(index,1)}})if(isMust.length>0){showDefaultTips('请注意必填项目！','',3)return}this.$emit('complete',this.submitData)this.dialogShow=false}代码在这里