xaboy / form-create-designer

好用的Vue低代码可视化表单设计器,可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率。支持PC端和移动端,目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
https://view.form-create.com/
MIT License
1.67k stars 377 forks source link

自定义组件新增的时候可以正常新增修改的时候无法渲染组件 #138

Open cmd1000000 opened 5 months ago

cmd1000000 commented 5 months ago

import myImageComponent from '@/components/formAgency/myImage.vue' const label = '授权函'; const name = 'myImage'; let i = 1 const uniqueId = () => uni${i++} export default { icon: 'icon-upload', label, name, rule() { return { type: name, field: uniqueId(), title: label, $required:false, component: myImageComponent, props: { imgUrl:'', uploadUrl:'', downloadUrl:'', } }; }, props() { return [{type: 'Required', field: 'formCreate$required', title: '是否必填'}, {type: 'input', field: 'imgUrl', title: '案例地址'}, {type: 'input', field: 'uploadUrl', title: '图片上传地址'}, {type: 'input', field: 'downloadUrl', title: '文件下载地址'}, ]; }, created() { console.log('created hook', this.uploadUrl, this.downloadUrl); }, }; -----------------------------------------------------这是js mounted() { //删除不必要的组件 this.$refs.designer.removeMenu('aide'); this.$refs.designer.removeMenu('layout'); this.$refs.designer.removeMenuItem('colorPicker'); this.$refs.designer.removeMenuItem('slider'); this.$refs.designer.removeMenuItem('rate'); this.$refs.designer.removeMenuItem('el-transfer'); this.$refs.designer.removeMenuItem('tree'); //更新组件 this.$refs.designer.addComponent(myImage) this.$refs.designer.appendMenuItem('main', { icon: myImage.icon, name: myImage.name, label: myImage.label, }) }, methods: { detail(){ if (this.id){ this.axios.get('/formAgency/' + this.id).then(response => { if (response.data.code===200){ this.ruleForm=response.data.data; if (this.ruleForm.form_filed){ this.$refs.designer.setRule(formCreate.parseJson(this.ruleForm.form_filed)); } if (this.ruleForm.form_option){ this.$refs.designer.setOption(formCreate.parseJson(this.ruleForm.form_option)); } } console.log(response) }) } }, 这是在页面中使用的方法

xaboy commented 5 months ago

不要通过component: myImageComponent方式挂载组件, 建议把用到的组件全局挂载 @cmd1000000

cmd1000000 commented 5 months ago

不要通过component: myImageComponent方式挂载组件, 建议把用到的组件全局挂载 @cmd1000000

好的,我下午试一下,谢谢