vue3 element的Form表单用法实例
引言
最近在做一系列后台管理系统,其中用的最多的就是表单和表格了。这里讲一下我最近对表单封装的思考。 以下是我的设计思路以及具体实现,我使用的是vue3+element-plus,因此这个组件也是以这两个库为基础。
已上传npm www.npmjs.com/package/@we…
设计目标
配置化
我们希望把表格的内容,验证规则,甚至于表单的样式,格式都能更规则化,配置化,这样后续我们可以通过构造json去实现一个表单,甚至可用实现拖拽式的构造表单。
参数简单
尽量减少json的层级,减少json的参数,字段更加语义化。
自由度
json其实是一套自由度的很少的规则,但是vue则我们提供更多的自由度,比如h函数,比如动态组件,利用这些方法我们可以实现更高的自由度。
实现过程
表单项的格式设计
首先第一步,我们先设计一个基础的格式,在这个JSON里,字段名都是很简单的英文单词,我专门把验证的规则rule放到每个子项里来,这也比较符合直观。
const oneItem = { key: 'title', title: '小说名', component: 'el-input', props: { placeholder: '请输入姓名' }, rule: [{ required: true, trigger: 'blur', message: '必填项' }], }
在这个格式里面,比较重要的主要是2个,key
,component
。key
其实就是你表单里数据的字段名,而component
则是你指定的编辑组件,在这里我们可以直接使用字符串,但其实这里可以通过vue的动态组件实现更灵活的应用,比如我们换一个组件库的input组件
import { Input } from '@varlet/ui' import '@varlet/ui/es/input/style/index.js' const oneItem = { component: Input }
这时候,我们就需要动态组件去渲染它,因此我们可以这样写去渲染,当component是一个字符串,比如el-input
的时候,我们渲染element
的input
组件,至于v-model这些我就省略了
<el-form-item v-for="item in items" :key="item.key"> <el-input v-if="item.component === 'el-input'" /> <component v-else :is="item.component" /> </el-form-item>
v-bind的妙用
每个组件库的组件参数都不一样,而且有些属性我们可能并不使用,比如el-input
有这个属性prefix-icon
,是一个前缀图标,别的组件库不一定有啊,那到我们需要把所有组件库的所有属性都写在json? 我在之前的json中设计了以个props
字段,这里面就是存放的是组件库的属性,或者是我们需要给组件传的值. 这时候,vue给我们提供了一个很方便的功能,直接使用v-bind
传入一个对象,他就自动会帮我们把属性绑定。 比如这样写
const props = {a:1,b:2} <el-input v-if="item.component === 'el-input'" v-bind="props" />
vue就会自动处理为下面这种, 这就是v-bind的妙用。当然运用renderFunction
也可以实现这个效果,诸君可以自己尝试一下
<el-input v-if="item.component === 'el-input'" v-bind:a="props.a" v-bind:a="props.b"/>
computed的妙用:实现v-model
下面我们来看一下数据的问题,vue中提供了方便v-model
,方便我们修改的值能实时响应,并且我们可以自己实现一自定义v-model
。 它的基本原理是这样,我们先父传子,然后子再通过事件告诉父组件修改这个值。大概实现就是这样
<script> <button>+1</button> </script> export default{ props:[ 'modelValue', //v-model 'a' //v-model:a ], emits:['update:modelValue','update:a'], methods:{ add(){ this.$emit('update:modelValue',this.modelValue++) this.$emit('update:a',this.a++) } } }
但是这个代码里有一个问题,在vue中我们其实是无法修改props的,也就是说this.modelValue++
会报错,那么如何解决这个问题呢,答案就是computed
,computed
其实也可以修改的,我们可以指定它的set方法,这样就躲避了修改props的问题,从而实现了v-model
{ computed:{ num:{ get(){ return this.modelValue }, set(val){ this.$emit('update:modelValue',val) } } } }
useAttrs的妙用
在我的组件中有这样一个功能,上传。这就涉及到了回调函数的问题,也就是说我上传完,甚至包括方法的名字,这样才更灵活,比如我们在json中新增一个字段,
{ uploader: { emits: 'handleUploadCover', } }
然后我在渲染的时候会给它绑上这个事件,那么我们如何获取到这个事件的函数,并调用呢?
<zForm @handleUploadCover="xxx" />
在vue3中,我使用了useAttrs,需要注意的是vue3这里似乎与vue2有些不同。vue3中,attrs获取到的是没有注册的值,比如你如果在emits
里声明了,在这里就取不到了,不过这也正合我意,我们可以随意指定事件名。
const attrs = useAttrs() /* 返回值 { onHandleUploadCover:function(){xxx} } */
可以看到这里能获取事件,只是名字略有不同,这里大家处理一下就行了
表单验证
表单里最重要的就是验证.首先在我之前的设计中,表单验证的规则是分布在每一个子项中,因此我们需要整合一下,这一块我就不赘述了,也很简单。
验证方法我是直接使用的el-form
的验证,只是封装了一下罢了。 需要注意的是,如果你用的是script setup,需要使用defineExpose
导出这个方法
const validate = ()=> new Promise((resolve) => { this.$refs.form.validate((isValid) => resolve(isValid)); }) defineExpose({ validate })
上传文件
上传文件这里我其实截取了一下element的上传,只使用了它选择的文件的功能,这块其实可以自己实现的。 因为我上传中间还要加很多参数,还有验证,因此我使用了before-upload
方法,并主动reject.
<el-upload v-if="item.uploader" style="margin-top: 10px" :before-upload="(file) => beforeUpload(file, item)" :show-file-list="false" v-bind="item.uploader.props" > <el-button type="primary">点击上传</el-button> </el-upload> const beforeUpload = (rawFile, { key, uploader }) => { /*执行逻辑,其实就是调起uploader.emits里的方法*/ return Promise.reject() }
代码总结
我把demo放到了这里,后续有时间我整理一下发个npm包。 stackblitz.com/edit/vue-m8…
这次封装这个组件,我学到了很多东西,一些比较细微的vue3知识点,比如v-bind
。但我也知道这也封装也有一些问题或者叫争论。
到底应不应该使用json
之前看过一篇封装el-table的文章,里面就反对使用json,原因无非2点:json结构过于庞大,json结构不利于接手代码的人使用。
- 先说第二点,我觉得通过一个好的结构定义是可以缓解这个问题的,但是难道你函数式封装就没有学习成本了?我觉得json封装其实每次就是复制黏贴,反而学习成本更低,但是开发成本会更高,你需要处理各种错误的值,错误的结构,因此结构越简单越好,甚至可以拍平。
- json并不庞大,庞大的是我们的表单,如果你表单里几百个条目,你怎么样写都只会庞大,因此还是建议分割表单,及时上报。
需不需要v-model
在我这次封装中,我把数据通过v-model
实时返回了,但是当我写到结尾的时候,我觉得表单的数据并不需要实时,因为我们需要的不是实时的数据,而是验证后的正确数据。因此我觉得我们可以暴露出一个getData
方法,返回验证正确的数据。
性能问题
实际使用中,我发现这样封装似乎有点卡,目前暂时不知道是哪里的问题,有待研究
以上就是vue3 element的Form表单用法实例的详细内容,更多关于vue3 element Form表单的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7143502980040359950
相关文章
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 本篇文章是对C#中WinForm控件之Dock顺序调整进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解,对本文感兴趣的朋友一起学习吧...2016-04-19
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23
- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇C# winform打开Excel文档的方法总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要给大家介绍C# winform快捷键设置技巧,涉及到C winform快捷键相关知识,对C winform知识感兴趣的朋友可以参考下本篇文章...2020-06-25
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
c#中Winform实现多线程异步更新UI(进度及状态信息)
本篇文章主要介绍了c#中Winform实现多线程异步更新UI(进度及状态信息) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25