vue3 element的Form表单用法实例

目录
  • 引言
  • 设计目标
    • 配置化
    • 参数简单
    • 自由度
  • 实现过程
    • 表单项的格式设计
    • v-bind的妙用
    • computed的妙用:实现v-model
    • useAttrs的妙用
    • 表单验证
    • 上传文件
  • 代码总结
    • 到底应不应该使用json
    • 需不需要v-model
    • 性能问题

引言

最近在做一系列后台管理系统,其中用的最多的就是表单和表格了。这里讲一下我最近对表单封装的思考。 以下是我的设计思路以及具体实现,我使用的是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个,keycomponentkey其实就是你表单里数据的字段名,而component则是你指定的编辑组件,在这里我们可以直接使用字符串,但其实这里可以通过vue的动态组件实现更灵活的应用,比如我们换一个组件库的input组件

import { Input } from '@varlet/ui'
import '@varlet/ui/es/input/style/index.js'
const oneItem = {  component:  Input }

这时候,我们就需要动态组件去渲染它,因此我们可以这样写去渲染,当component是一个字符串,比如el-input的时候,我们渲染elementinput组件,至于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表单的资料请关注我们其它相关文章!

(0)

相关推荐

  • element的el-form和el-table嵌套使用实现

    目录 一.element的el-form和el-table嵌套使用 二.应用实例 一.element的el-form和el-table嵌套使用 要点: :model="addJsonForm" 给表单绑定数据,addJsonForm 是传入表单的数据对象 注意表单数据对象 addJsonForm 的定义:属性 params (可按需求命名)为表单内嵌套的表格的显示数据,数组类型: 属性 addJsonRules ,为表单绑定的验证规则. el-table: 采用自定义列模板,可自定义表

  • element中el-table与el-form同用并校验

    目录 基本结构 添加校验 自己写校验方法 同table中,某字段不能重复 必填*显示 表头加* 删除某行,同时删除这行的校验结果 基本结构 <template> <div> <el-form ref="form" :model="form"> <el-table ref="table" :data="form.tableData" empty-text='暂无数据'> <e

  • 使用ElementUI循环生成的Form表单添加校验

    目录 ElementUI循环生成的Form表单添加校验 HTML代码片段 VUE中data中的声明 效果图 ElementUI循环动态生成表单校验问题 ElementUI循环生成的Form表单添加校验 ElementUI 中使用循环生成的form表单需要动态添加校验的规则 在data中定义好需要的rule,使用Element的语法给 :rules 动态绑定 :prop="getAllTableData.${i}.value" getAllTableData是v-for绑定的数组,i是索

  • element表单el-form的label自适应宽度的实现

    在ElementUI官方文档中el-form提供了一个参数 label-width: 可以在form表单中设置label-width宽度(作为 Form 直接子元素的 form-item 会继承该值),但问题来了,如果不确定标签的长度,给固定值容易造成过长标签的换行,导致页面布局错乱. 所以把label-width设置为auto <el-form ref="form" :model="form" label-width="auto" siz

  • Vue2 Element Schema Form 配置式生成表单的实现

    目录 前置知识点 Component $attrs $listeners 表单的结构是什么样的 配置数组数据结构 结语 前置知识点 为了实现一个Schema Form配置式表单的生成,需要了解一部分前置知识点. Component vue 提供了一个内置组件 Component,用来动态渲染组件,举个例子,本篇文章以Element UI 为例,假设我们全局注册了Element UI的组件,那么下面一段代码 <Component is="el-input"></Comp

  • Element通过v-for循环渲染的form表单校验的实现

    目录 普通的form表单校验 v-for 循坏的表单校验 实现的代码 普通的form表单校验 日常业务开发中,对于中后台管理系统,form表单校验是一个很常见的问题. 查阅Element官方文档,我们了解到,form表单校验是这样的,需要给所校验的el-form-item添加prop属性值,这个属性值便就是当前元素v-model 所绑定的值.如图所示: v-for 循坏的表单校验 那么问题来了,通过v-for 遍历循环渲染的form表单怎么添加校验呢?主要问题就在于其prop了. 再次阅读官方文

  • vue3 element的Form表单用法实例

    目录 引言 设计目标 配置化 参数简单 自由度 实现过程 表单项的格式设计 v-bind的妙用 computed的妙用:实现v-model useAttrs的妙用 表单验证 上传文件 代码总结 到底应不应该使用json 需不需要v-model 性能问题 引言 最近在做一系列后台管理系统,其中用的最多的就是表单和表格了.这里讲一下我最近对表单封装的思考. 以下是我的设计思路以及具体实现,我使用的是vue3+element-plus,因此这个组件也是以这两个库为基础. 已上传npm www.npmj

  • Yii框架form表单用法实例

    本文实例讲述了Yii框架form表单用法.分享给大家供大家参考.具体方法如下: 使用表单 在 Yii 中处理表单时,通常需要以下步骤: 1. 创建用于表现所要收集数据字段的模型类. 2. 创建一个控制器动作,响应表单提交. 3. 在视图脚本中创建与控制器动作相关的表单. 一.创建模型 在编写表单所需的 HTML 代码之前,我们应该先确定来自最终用户输入的数据的类型,以及这些数据应符合什么样的规则.模型类可用于记录这些信息.正如模型章节所定义的,模型是保存用户输入和验证这些输入的中心位置. 取决于

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • Vue3+Element+Ts实现表单的基础搜索重置等功能

    从Vue2的写法转变为Vue3的格式之后,会有一些写法和代码结构的改变,这里对一些重点进行介绍. 代码结构: 写法一(推荐): <script setup lang="ts"> import { ref, reactive } from 'vue' import type { ElForm } from 'element-plus' const myform = ref<InstanceType<typeof ElForm>>() const for

  • Bootbox将后台JSON数据填充Form表单的实例代码

    序言: 刚结束公司的三个月试用期,意味着我即将正式步入社会成为广大从事IT行业的一员.作为一个编程小白,无论从技术层面还是知识层面都是比较薄弱的,想要成为一个优秀的程序员不断的学习与探索是不可避免的.我相信一切的付出与收获是成正比的!Fighting! 这几天在做公司的实际项目的时候,需要实现选中Bootstrap table中的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑.获取表格行的数据是比较方便的,具体可以查找Bootstrap table参考文档,具体地址可以直接

  • 微信小程序 PHP后端form表单提交实例详解

    微信小程序 PHP后端form表单 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给小程序. 2.昨天写了登录注册.忘记密码功能,他们实质上都是一个表单提交操作.因此就拿注册功能来写这个例子. 3.目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于

  • jquery插件EasyUI中form表单提交实例分享

    之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参. 当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改.下面的一张截图是具体的业务需求. 一.要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台.下面是表单代码. 二.表单代码 <div id="Editwin" class="easyui-window" title=&

  • jQuery EasyUI API 中文文档 - Form表单

    Form 表单 用法 复制代码 代码如下: <form id="ff" method="post"> ... </form> 使 form 成为 ajax 提交的 form . 复制代码 代码如下: $('#ff').form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提

  • vue+elementui(对话框中form表单的reset问题)

    目录 对话框中form表单的reset问题 解决原理 解决办法 element UI form表单重置无效 实例化是 说下解决 对话框中form表单的reset问题 一般在新增和编辑的时候用的都是同一个对话框和form表单,而在先点击编辑的时候form表单的resetfileds函数就会失效 解决原理 实际上结构是(通过vue类比) data里面有一个form表单的初始值, methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执

  • jQuery ajax提交Form表单实例(附demo源码)

    本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

随机推荐