一、form-generator是什么？✨ ⭐️ 🌟
form-generator的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。
但form-generator提供组件并不能满足我们在项目中的使用，比如表格组件，el-table，子表单等等，在很多项目中会经常使用到。
这里有一份专门针对form-generator扩展ElementUI组件的专栏，代码非常详细，从拖拽到浏览再到解析器解析表单。感兴趣的小伙伴可以看看。form generator扩展组件系列
二、组件截图(表格布局)✨ ⭐️ 🌟
表格布局组件主要是用于一些流程表单的申请表一类，有助于提升后期的电子签章和打印功能。
拖拽时的效果
运行时的效果
三、组件截图(子表单)✨ ⭐️ 🌟
1️⃣拖拽时的效果
1️⃣运行时的效果
1️⃣parser解析器效果
2️⃣显示模式切换(横向or竖向)
2️⃣切换显示模式为竖向的效果
2️⃣parser解析器效果
子表单部分的源码,点此跳转
四、组件截图(表格)✨ ⭐️ 🌟
下面的代码块是一个简单el-table的实列。你只需要在表单设计器里面需改这三个文件，运行就能实现上方截图的数据表格效果。其实有了这一个小案例，你基本上也可以扩展出完善的element-table了。
config.js👇👇
{
__config__: {
layout: 'colFormItem',
tagIcon: 'table',
tag: 'el-table',
label: '数据表格',
showLabel: false,
children: [{
__config__: {
layout: 'raw',
tag: 'el-table-column'
},
align: 'center',
type: 'selection',
width: '40'
},
{
__config__: {
layout: 'raw',
tag: 'el-table-column'
},
align: 'center',
prop: 'name',
label: '姓名'
},
{
__config__: {
layout: 'raw',
tag: 'el-table-column'
},
align: 'center',
prop: 'age',
label: '年龄'
},
{
__config__: {
layout: 'raw',
tag: 'el-table-column'
},
align: 'center',
prop: 'sex',
label: '性别'
},
{
__config__: {
layout: 'raw',
tag: 'el-table-column'
},
align: 'center',
prop: 'ah',
label: '爱好'
}
]
},
type: 'default',
justify: 'start',
align: 'top',
data: [{
name: '张三',
sex: '男',
age: '18',
ah: '打球、游泳'
}, {
name: '李四',
sex: '男',
age: '18',
ah: '打球、游泳'
}, {
name: '老六',
sex: '男',
age: '18',
ah: '打球、游泳'
}],
border: true
}js.js👇👇
// 构建data
function buildData(scheme, dataList) {
const config = scheme.__config__
if (scheme.__vModel__ === undefined) return
// 主要就是这里
if (config.tag === 'el-table') {
dataList.push(`${scheme.__vModel__}: ${JSON.stringify(scheme.data)}`)
return
}
const defaultValue = JSON.stringify(config.defaultValue)
dataList.push(`${scheme.__vModel__}: ${defaultValue},`)
}html.js👇👇
const tags = {
'el-table': el => {
const {
tag
} = attrBuilder(el)
let child = elTableColumn(el)
console.log(child)
return `<${tag} :data="${confGlobal.formModel}.${el.__vModel__}">${child}</${tag}>`
}
}
function elTableColumn(scheme) {
const children = []
const config = scheme.__config__
if (config.children.length > 0) {
const { tag } = scheme.__config__.children[0].__config__
config.children.forEach(ts => {
ts.prop && children.push(`<${tag} label="${ts.label}" align="${ts.align}" prop="${ts.prop}"></${tag}>`)
})
}
return children.join('\n')
}这里是一个element-ui的基础表格实例，由于表格、子表单，数据表格等扩展涉及到的文件很多，这里就不放代码展示了。还有很多其他的组件。如果有需要的小伙伴可以联系我。专栏里面会包含子表单全部代码，欢迎订阅。
我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。文章来源：https://www.toymoban.com/news/detail-609813.html
文章来源地址https://www.toymoban.com/news/detail-609813.html
👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇
到了这里，关于form-generator扩展原生表格，element-table，子表单等组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
