elpis-里程碑四-基于Vue完成动态组件库建设

木木爱研究2026-08-31 10:19

一、阶段目标

前期已经依托 DSL 完成领域模型搭建，实现列表页面动态渲染。列表行按钮的触发逻辑，开发动态新增、编辑、查看详情整套 CRUD 弹窗能力，一套配置支撑完整增改查流程。

二、两层核心配置设计

1.字段级配置 xxxOption

抽象出schema-fyemianorm组件，通过动态组件语法来按需加载写好的表单组件，在form-item_config.js中做表单组件映射的方式，在配置信息中写好组件的自定义项包含类型、默认值、其列表值等信息，通过渲染当前配置列表搭配动态组件搭建整套动态组件库

字段配置示例：

js 复制代码

xxxPageOption: { 
...elComponentConfig, // 标准 el-component配置 
comType: "", // 控件类型 
input/select/input-number visible: true, // 是否展示，默认为true 
disabled: false, // 是否禁用，默认为false 
default: "", // 默认值 
enumList: [], // 枚举列表，
comType === select时生效 
},

2.页面级配置

管控整个弹窗页面全局行为，通过列表按钮绑定的 eventKey、eventOption 内 comName 匹配对应弹窗配置，统一定义页面基础属性：

js 复制代码

componentConfig: { 
xxxPage: { 
title: '', // 弹窗表单标题
saveBtnText: '', // 保存按钮自定义文案 
mainKey: '', // 数据唯一主键，编辑、详情页面必填，用于数据回显
component:''
}, 
// 支持业务按需扩展更多页面配置项
}

三、总结

当前市面上的后台管理系统，大部分页面重复性高，大量crud的页面结构，为了维护这些页面也需要去在各个页面上去改动内容，这就导致了高维护成本和扩展困难的问题，为了解决这个问题当我们采用这种配置形式去写代码的时候就会在一份配置中改动代码，不用去各个组件中不停的修改逻辑以及样式，极大的减轻维护成本,上述示例就是配置项，通过扩展配置项，进行业务的扩充与修改