xaboy
自定义组件新增的时候可以正常新增修改的时候无法渲染组件
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)
})
}
},
这是在页面中使用的方法
不要通过
component: myImageComponent方式挂载组件, 建议把用到的组件全局挂载 @cmd1000000
好的，我下午试一下，谢谢