element-ui 通用表单封装及VUE JSX应用
一、存在及需要解决的问题
一般在做后台OA的时候会发现表单重复代码比较多,且逻辑基本一样,每次新加一个表单都需要拷贝基本一致的代码结构,然后只是简单地修改对应的字段进行开发
二、预期结果
提取重复的表单逻辑形成通用的组件,通过约定的JSON数据结构配置生成表单
1、使用方法
<common-form :form-option="formOption" :is-reset-form-flag="isResetFormFlag"></common-form>
复制代码
接收的props:
isResetFormFlag:是否更新表单内容标志,用于触发更新表单的formModel
formOption:表单配置,下有详细配置说明
isDisabled:表单是否可编辑
2、单一表单组配置
{
name: 'channel-form',
data: {},
items: [
{
label: '类型',
name: 'biz_type',
type: 'select',
dataList: [{
index: 1,
text: '业务部'
}]
}
],
rules: {
name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
},
btnList: [{
text: '保存',
type: 'primary',
onClick: this.commitForm
}]
}
复制代码
3、多表单组配置
formOption: {
name: 'channel-form',
data: {},
groups: [{
title: '',// 组标题
tips: ''// 组提示
items: [] // 组表单项,和单一组配置一致
}]
}
复制代码
三、实现逻辑
根据配置输出不同的form-item,需要特殊处理的表单项通过jsx
由使用的地方自定义实现
什么是JSX:cn.vuejs.org/v2/guide/re…
使用JSX原因:表单包含了大部分的选项,但是也有很多不确定的情况需要依赖外部自己实现,相对于template的方式jsx使用起来更加灵活
四、配置文档
节点 | 描述 | 类型 | 是否必须 | 备注 |
---|---|---|---|---|
name | 表单名 | String | 否 | 默认名 oa-form |
data | 表单数据 | Object | 否 | 用于编辑场景异步请求的表单填充数据 |
groups | 表单组 | Array | 否 | groups 和 items 不应该同时存在,groups 中包含了items,如果groups为空取外部的items渲染,groups不为空仅渲染groups组内容 |
items | 表单项 | Array | 否 | 支持的type类型:输入框:input、textarea;多选框:checkbox;单选框:radio;下拉菜单:select |
rules | 表单校验规则 | Object | 否 | 节点名需要与items配置的name一一对应 |
btnList | 按钮列表 | Array | 否 | 会在回调函数包含表单的数据及表单引用 |
六、VUE JSX 遇到的一些问题
v-model支持: babel-plugin-jsx-v-model
sync 修饰符写法
visible={ this.dialogImgVisible } {...{on: {'update:visible': (val) => { this.dialogImgVisible = val }}}}
复制代码
七、部分实现代码
1、生成列表
generateList (itemObj) {
let itemEle = []
for (let index = 0; index < itemObj.dataList.length; index++) {
const item = itemObj.dataList[index]
switch (itemObj.type) {
// 下拉菜单
case 'select':
itemEle.push(<el-option key={ item.index } label={ item.text } value={ item.index }></el-option>)
break
// 多选框
case 'checkbox':
itemEle.push(<el-checkbox label={ item.index }>{ item.text }</el-checkbox>)
break
// 单选框
case 'radio':
itemEle.push(<el-radio label={ item.index }>{ item.text }</el-radio>)
break
}
}
return itemEle
}
复制代码
2、生成下拉菜单
generateSelect (item) {
return <el-select v-model={ this.formModel[item.name] } style={ item.style || this.defaultStyle }>{ this.generateList(item) }</el-select>
}
复制代码
备注:其他项实现类似
3、render函数
render (h) {
let ele = []
// 表单内容
if (this.isGroup) {
ele = this.generateGroup()
} else {
ele = this.generateFormItems(this.formOption.items)
}
// 按钮列表
let btnListEle = []
this.formOption.btnList.forEach((btn) => {
btnListEle.push(<el-button type={ btn.type } on-click={ () => { btn.onClick(this.$refs[this.formName], this.formModel) } }>{ btn.text }</el-button>)
})
return (
<div class="oa-form-container">
<el-form ref={ this.formName } model={ this.formModel } rules={ this.formOption.rules } inline={ this.inline } disabled={ this.isDisabled } label-width={ this.formOption.labelWidth || '150px'}>
{ ele }
<el-form-item label-width={ this.isGroup ? '0' : '150px'}>{ btnListEle }</el-form-item>
</el-form>
</div>
)
}
复制代码
八、最后贴一个表格的封装
<script>
export default {
props: {
// 表格列
columns: {
type: Array,
default: _ => { return [] }
},
// 表格数据
tableData: {
type: Array,
default: _ => { return [] }
},
// loading 标志
loading: {
type: Boolean,
default: false
}
},
methods: {
sortChange (obj) {
this.$emit('sortChange', obj)
}
},
render () {
return (
<el-table border stripe v-loading={ this.loading } element-loading-text="拼命加载中" data={ this.tableData } on-sort-change={ obj => { this.sortChange(obj) } } style="width: 100%">
{
this.columns.map(columnObj => {
return <el-table-column prop={ columnObj.prop } label={ columnObj.label } sortable={ columnObj.sortable } width={ columnObj.width }
{...{
scopedSlots: {
default: scope => {
return columnObj.hasOwnProperty('render') ? columnObj.render(scope.index, scope.row) : scope.row[columnObj.prop]
}
}
}}
>
</el-table-column>
})
}
</el-table>
)
}
}
</script>
复制代码
1、使用方法
<common-table :columns="columns" :table-data="tableData" :loading="loading" @sort-change="sortChange"></common-table>
复制代码
2、columns 配置
{
label: '',
prop: '',
width: '100',
sortable: true
render: ()=>{}
}
复制代码
自定义配置渲染,传入render函数,如果有render函数,优先使用render函数结果
Github地址:github.com/mrtanweijie…
element-ui 通用表单封装及VUE JSX应用的更多相关文章
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 重置表单
<el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- element ui FORM表单
form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- jquery自动将form表单封装成json的具体实现
前端页面:<span style="font-size:14px;"> <form action="" method="post&q ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- Vue iview 表单封装验证
以下内容转自iview社区,仅供自己查看使用 Form表单部分 <div> <Form ref="FormOne" :model="FormOne&qu ...
随机推荐
- 1023 Have Fun with Numbers (20 分)
1023 Have Fun with Numbers (20 分) Notice that the number 123456789 is a 9-digit number consisting ...
- vue技术栈进阶(01.使用vue-cli3创建项目)
使用vue-cli3创建一个项目 1) 使用Vue UI创建.管理项目 1.安装依赖的脚手架包. 2.命令行中输入vue ui 即可以打开可视化界面 可视化界面: 2)项目结构目录整理 3)基本配置 ...
- javascript 入门 之 bootstrap 第一个程序
<table data-toggle="table"> <thead> <tr> <th>Item ID</th> &l ...
- JS入门系列(1)-原型-函数原型
实例1: 首先定义一个Persion类或者说是函数 var p1 = Persion();:表示,作为普通函数调用 var p2 = new Persion();:表示,作为构造器调用 创建函数之后, ...
- Java中的垃圾回收算法详解
一.前言 前段时间大致看了一下<深入理解Java虚拟机>这本书,对相关的基础知识有了一定的了解,准备写一写JVM的系列博客,这是第二篇.这篇博客就来谈一谈JVM中使用到的垃圾回收算法. ...
- hadoop(九)启动|关闭集群(完全分布式六)|11
前置章节:hadoop集群namenode启动ssh免密登录(hadoop完全分布式五)|11 集群启动 配置workers(3.x之前是slaves), 删除localhost,添加102/103/ ...
- Elasticsearch系列---聚合查询原理
概要 本篇主要介绍聚合查询的内部原理,正排索引是如何建立的和优化的,fielddata的使用,最后简单介绍了聚合分析时如何选用深度优先和广度优先. 正排索引 聚合查询的内部原理是什么,Elastich ...
- Go语言 命令行解析(一)
命令行启动服务的方式,在后端使用非常广泛,如果有写过C语言的同学相信不难理解这一点!在C语言中,我们可以根据argc和argv来获取和解析命令行的参数,从而通过不同的参数调取不同的方法,同时也可以用U ...
- Tomcat5的web应用启动顺序详解
Tomcat5的web应用启动顺序详解 [收藏此页] [打印] 作者:佚名 2007-07-17 内容导航: 第1页 [IT168技术文档]摘要: 应用Tomcat对于我们来讲实在是司空见惯 ...
- 想进大厂嘛?这里有一份通关秘籍:iOS大厂面试宝典
1.NSArray与NSSet的区别? NSArray内存中存储地址连续,而NSSet不连续 NSSet效率高,内部使用hash查找:NSArray查找需要遍历 NSSet通过anyObject访问元 ...