vue动态组件实现动态表单的方法

D哈迪斯2025-04-17 14:16

本文获取动态列和动态表单的后端使用数据库存储，使用java接口获取代码内容。

后端代码我就不粘贴出来了，就是普通的从数据库中获取代码，获取到的代码例子如下：

已下代码是iview的modal信息

复制代码

    <Modal width="800" v-model="modal" title="新增"  :mask-closable="false" >
        <i-Form :model="saveform" ref="saveform" :rules="ruleValidate" :label-width="100">
        <row>
        <i-col span="12" >
	                <Form-Item label="代码" prop="dm">
		                <i-Input v-model="saveform.dm"></i-Input>
		            </Form-Item>
		</i-col>
		<i-col span="24" >
	                <Form-Item label="名称" prop="mc">
		                <i-Input v-model="saveform.dm"></i-Input>
		            </Form-Item>
        </i-col>
        </row>

        </i-Form>
        <div slot="footer">
            <i-button type="text" @click="modal=false">取消</i-button>
            <i-button type="info" @click="save">保存</i-button>
        </div>
    </Modal>

前端页面中加入自定义组件：

复制代码

    <!-- 动态组件注入 -->
    <component :is="dynamicComponent" :saveform="saveform" ref="dynamicComp"></component>

然后在vue的create生命周期中，加入已下代码，用于注册动态表单：

复制代码

	created: function () {
		let self = this;
		var url = baseUrl + 'xxxxxx';
		let pro = new Promise((resolve, reject) => {
			$.ajax({
				url: url,
				type: 'POST',
				data: {},
				dataType: 'json',
				success: function (res) {
					let nr = res.content.nr;
					try {
						resolve(nr);
					} catch (error) {
						reject(error);
					}
				},
				error: function (err) {
					console.log('err:', err);
					reject(err);
				}
			});
		});
		pro.then(result => {
			console.log('结果:', result);
			// 创建一个动态组件
			const DynamicModal = {
				template: result,
				props: ['saveform'], // 接收父组件传递的数据
				data() {
					return {
						modal: false,
						saveform: {dm:null,mc:null}
					};
				},
				methods: {
					save: function () {
						var self = this;
						console.log('这是保存方法');
					},
				}
			};
			// 在 Vue 实例中注册动态组件
			app.$options.components.DynamicModal_1 = DynamicModal;
			// 在模板中使用动态组件
			self.dynamicComponent = 'DynamicModal_1';

			console.log('结果:self', self);

		}).catch(error => {
			console.log('出错:', error);
		});
	},