Vue2 Element Schema Form 配置式生成表单的实现
目录
- 前置知识点
- Component
- $attrs
- $listeners
- 表单的结构是什么样的
- 配置数组数据结构
- 结语
前置知识点
为了实现一个Schema Form
配置式表单的生成,需要了解一部分前置知识点。
Component
vue
提供了一个内置组件 Component
,用来动态渲染组件,举个例子,本篇文章以Element UI
为例,假设我们全局注册了Element UI
的组件,那么下面一段代码
<Component is="el-input"></Component>
将被渲染为el-input
组件。
好了,最重要的实现知识点已经完了,只要了解了这一点,我这个Schema Form
的实现思路,你就能完全看懂了,就这么简单。
但是为了我们表单的易用性,我们再了解一点儿其他的。
比如Component
组件并非只能接收一个字符串,渲染全局组件,同时可以接收一个Component
组件,也就是说,当我们Element UI
组件没有全局注册的时候,我们可以通过import { ElInput } from 'element'
,传递给Component
组件,同样可以完成渲染一个el-input
组件的功能。
$attrs
第二个知识点,vue
的属性透传
,假如你有这么一个疑惑 —— 我对el-input
进行了二次封装
,那el-input
接收的props
我是否需要在二次封装的组件
中进行props的定义,再逐一传递给el-input
才能生效。
如果有这样的疑惑那么$attrs
可以帮你,对于二次封装的组件,通过定义v-bind="$attrs"
,传递给父组件的属性即可透传给el-input
,于是就有了这么一个疑问,$attrs
可以绑定给v-bind
,那么一个普通的对象可以吗,答案是可以的。
这是我们 schema form
变得好用的第二个重要的知识点。
$listeners
与 $attrs
相同,做事件透传的,通过v-on
绑定。
以上就是我认为,实现Schema Form
配置式生成表单所需要掌握的全部知识及扩展思考,接下来,我们简单完成一个配置式表单.
表单的结构是什么样的
1、我可能希望对表单进行一部分特殊的处理,所以,包一层div
总是没错的,当然,这是我的习惯,你们可以自行选择。
2、既然是表单,那一定被el-form
包裹。
3、为了配置式布局的需要,我希望引入el-row el-col
栅格系统
4、无论如何完善表单,必然不可能满足所有要求,那最简单的方式就是抛出slot
5、有些时候我希望渲染文本呢?有些时候我希望渲染字段的值而不涉及任何组件呢?
6、最后才是渲染对应的组件
那么,一个表单的结构化雏形就完成了。
<div class="schema-form"> <el-form> <el-row> <el-col v-for="item in config" :key="item.key"> <el-form-item> <slot v-if="item.component === 'slot'" :name="item.slotName"></slot> <div v-else-if="item.component === 'innerText'"></div> <template v-else> 渲染对应组件,但需要对某些组件特殊处理 </template> </el-form-item> </el-col> </el-row> </el-form> </div>
从上面的结构中,我们再来思考,我们的配置config
数组的字段结构应该是什么样的。
配置数组数据结构
1、el-form
可能需要一些字段注入,作为最外层的组件,将传入schema form
的字段都给它
2、el-form
需要传入一个数据源,这个数据源可以内部定义再传给外部,也可以传入一个对象,利用对象的特性做双向绑定,我选择了后者
3、el-col
项可能有时不显示,所以config
上扩展一个字段hidden
,用于控制该项是否显示。
4、el-form-item
的属性透传
5、innerText
的样式定义
一些特殊的描述出来了,其余的再赘述,那么,config
的数据结构就是这样
{ key: '', // 当前字段的 key 值,同时会传到 el-form-item 的prop,不传数据验证和重置会失效 label: '', // 当前 el-form-item 的label hidden: '', // 当前表单项是否展示 labelWidth: '', // el-form-item 的label宽度 component: '', // 支持 slot、innerText、Component,渲染成什么 slotName: '', // compoment 为 slot 时,该值为对应slot的名字供外部使用 innerClass: '', // component 为 innerText 时,给文本的样式,通常为全局样式 innerStyle: '', // 同上 innerText: '', // component 为 innerText 时,优先显示的文本,否则会显示当前的字段值 itemProps: '', // 注入到 el-form-item 的属性 props: '', // 当 component 为渲染组件时,注入到渲染组件当中的属性 listeners: '', // 当 component 为渲染组件时,注入到渲染组件当中的事件 }
当把这些实现之后,其余需要扩展的功能可以自行实现,我这里也只是在业务中的扩展,并非完善的。
于是,我们的表单组件就变成了这样
<template> <div class="nx-form"> <el-form ref="form" v-bind="$attrs" :model="source" class="nx-form" > <el-row :gutter="20"> <el-col v-for="item in config" :key="item.key" :span="item.hidden ? 0 : item.span || 8" > <el-form-item v-if="!item.hidden" :label="item.label" :prop="item.key" :label-width="item.labelWidth || labelWidth || '120px'" v-bind="item.itemProps" > <slot v-if="item.component === 'slot'" :name="item.slotName"></slot> <div v-else-if="item.component === 'innerText'" :class="item.innerClass" :style="item.style" > {{ item.innerText || source[item.key] }} </div> <template v-else> <div class="nx-flex-align-center"> <component :is="item.component" v-model="source[item.key]" style="width: 100%;flex: 1;" v-bind="item.props" v-on="item.listeners" > <template v-if="item.component === 'el-radio-group'"> <el-radio v-for="(radio, radioIndex) in item.data" :key="radioIndex" style="margin-top: 10px;" :label="radio.value" :disabled="radio.disabled" > {{ radio.label }} </el-radio> </template> <template v-if="item.component === 'el-checkbox-group'"> <el-checkbox v-for="(checkbox, checkboxIndex) in item.data" :key="checkboxIndex" :label="checkbox.value" > {{ checkbox.label }} </el-checkbox> </template> <template v-if="item.component === 'el-select'"> <el-option v-for="(option, optionIndex) in item.data" :key="optionIndex" :label="option.label" :value="option.value" ></el-option> </template> </component> <div v-if="item.after" class="nx-form__after" > {{ item.after }} </div> </div> <div v-if="item.tips" class="nx-form__tips" v-html="item.tips" ></div> </template> </el-form-item> <!-- <div v-if="item.tips" :style="{ marginLeft: item.labelWidth || '120px' }" class="nx-form__tips" v-html="item.tips" ></div> --> </el-col> </el-row> </el-form> </div> </template> export default { name: 'NxForm', components: {}, props: { config: { type: Array, default: () => [] }, source: { type: Object, default: () => ({}) } }, methods: { resetFields() { this.$refs.form.resetFields(); }, clearValidate() { this.$refs.form.clearValidate(); }, async validate() { const valid = await this.$refs.form.validate(); return valid; } } };
可以看到,我扩展了一个data
字段,用来作为el-select
el-checkbox-group
el-radio-group
的数据源,这些特殊的组件单独列出就行了,基本上也之后有这么几个。
methods
里也只是为了方便添加了一些常用的form
方法,基本不做逻辑处理。
现在看一下,这样的配置可以生成怎样的表单
注意:我这里定义了一部分全局样式,比如在
schema form
下的组件,全部占满整格,使其比较美观。
生成这样一个常用的筛选项表单
<template> <div> <nx-form ref="searchForm" :source="searchForm" :config="searchConfig" > <div slot="search"> <el-button type="primary" @click="$refs.nxTable.search(1)">查询</el-button> <el-button @click="reset()">重置</el-button> </div> </nx-form> </div> </template> <script> export default { data() { searchForm: { keyWord: '', newsType: '', newsStatus: '', publishTime: [], createTime: [] }, }, computed: { searchConfig() { return [ { key: 'keyWord', component: 'el-input', span: 8, label: '关键字', props: { placeholder: '标题/创建人', clearable: true } }, { key: 'newsType', component: 'el-select', span: 8, label: '类型:', props: { placeholder: '请选择', clearable: true }, data: this.newsTypes }, { key: 'newsStatus', component: 'el-select', span: 8, label: '状态:', props: { placeholder: '请选择', clearable: true }, data: statusTypes }, { key: 'publishTime', component: 'el-date-picker', label: '发布时间:', span: 8, props: { clearable: true, valueFormat: 'timestamp', type: 'datetimerange', defaultTime: ['00:00:00', '23:59:59'], rangeSeparator: '-', startPlaceholder: '请选择开始时间', endPlaceholder: '请选择结束时间' } }, { key: 'createTime', component: 'el-date-picker', label: '创建时间:', span: 8, props: { clearable: true, valueFormat: 'timestamp', type: 'datetimerange', defaultTime: ['00:00:00', '23:59:59'], rangeSeparator: '-', startPlaceholder: '请选择开始时间', endPlaceholder: '请选择结束时间' } }, { component: 'slot', slotName: 'search', span: 8, labelWidth: '0' } ]; } } } </script>
其余的找了一些,也没啥特别的,就不贴了,简单来说,这个百来行的组件,应用在多个大型项目当中,易用性,扩展性,没有出现什么问题,配合我们自定义的其他table
组件、dialog
组件,十分钟就可以实现一个完整的B端增删改查。
值得一提的是,为了表单的易用性,我们基本上所有的自定义组件都支持了使用v-model
做数据绑定,达到简单易用的效果。
结语
代码是找了一个很久的项目写的一个思路,之后的项目中都有改进优化,大致只是分享一个思路,如果有什么想法的,欢迎指正。
到此这篇关于Vue2 Element Schema Form 配置式生成表单的实现的文章就介绍到这了,更多相关Vue2 Element Schema Form生成表单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!