网站LOGO
白雾茫茫丶
页面加载中
3月5日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    基于 Vue3 + Element-plus 表单 Form 组件二次封装
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    按住ctrl可打开默认菜单

    基于 Vue3 + Element-plus 表单 Form 组件二次封装

    谢明伟 · 原创 ·
    前端开发 · VueElement Plus
    共 5624 字 · 约 2 分钟 · 310
    本文最后更新于2023年12月28日,已经过了67天没有更新,若内容或图片失效,请留言反馈

    项目信息

    项目名称:vue3-xmw-form
    预览地址:点击预览
    Github:vue3-element-form

    使用方法

    • 根目录下执行 npm i vue3-xmw-form 命令

      POWERSHELL 代码:
      npm i vue3-xmw-form
    • 全局挂载组件

      JAVASCRIPT 代码:
      import { createApp } from 'vue'
      import App from './App.vue'
      import Xmwform from 'vue3-xmw-form'
      
      createApp(App).use(Xmwform).mount('#app')
    • 在页面上使用

      HTML 代码:
      <!-- template -->
      <vue3-xmw-form
       :formData="formData"
       :formColumns="formColumns"
       :formRules="formRules"
       label-width="120px"
       ref="baseForm"
       >
       <!-- 大标题 -->
       <template v-slot:baseTitle>
           <h1>基于 Element-plus 封装的表单组件</h1>
       </template>
       <!-- 操作按钮 -->
       <template v-slot:Actions>
           <div style="text-align: center">
           <el-button type="primary" @click="onSubmit(baseForm)"
               >提交</el-button
           >
           <el-button @click="handlerReset">重置</el-button>
           </div>
       </template>
      </vue3-xmw-form>

    Form 属性

    除此之外支持所有 el-form 所有属性

    参数说明类型默认值
    formData表单数据,双向绑定(字段需与 prop 属性一样)Object-
    formColumns表单配置项,详情见下方 Column 属性Array-
    formRules表单规则验证,校验规则请参考 rulesObject-

    Form 方法

    表单组件已给 el-form 绑定 ref 并用 defineExpose 暴露出来,我们只需要在引入组件中绑定ref,即可调用 el-form 的方法

    HTML 代码:
    <XmwForm :formData="formData" :formColumns="formColumns" :formRules="formRules" ref="baseForm"></XmwForm>

    调用方式

    JAVASCRIPT 代码:
    const baseForm = ref<HTMLElement | null>(null)
    baseForm.value.formRef.resetFields()

    具体写法可参考 Demo

    Column 配置

    参数说明类型默认值
    xType表单类型,详情见下方 xType 属性String-
    slotName插槽,开启 slot 支持(开启这个属性,其它属性无效)Booleanfalse
    labelel-form-item label 属性String-
    propel-form-item prop 属性String-
    span栅格占据的列数Number-
    offset栅格左侧的间隔格数Number-
    formItemOpts支持 el-form-item 的所有属性Object-
    $event支持 xType 表单类型的所有事件Function-

    xType 表单类型

    参数类型说明
    Input输入框支持 el-input 的所有属性和事件
    Autocomplete自动补全输入框支持 el-autocomplete 的所有属性和事件
    Select下拉框支持 el-select 的所有属性和事件
    SelectV2虚拟列表选择器支持 el-select-v2 的所有属性和事件
    DatePicker日期时间选择器支持 el-date-picker 的所有属性和事件
    TimePicker时间选择器支持 el-time-picker 的所有属性和事件
    TimeSelect时间选择支持 el-time-select 的所有属性和事件
    InputNumber数字输入框支持 el-input-number 的所有属性和事件
    Radio单选框支持 el-radio 的所有属性和事件
    Checkbox多选框支持 el-checkbox 的所有属性和事件
    SwitchSwitch 开关支持 el-switch 的所有属性和事件
    SliderSlider 滑块支持 el-slider 的所有属性和事件
    RateRate 评分支持 el-rate 的所有属性和事件
    Transfer穿梭框支持 el-transfer 的所有属性和事件
    Cascader级联框支持 el-cascader 的所有属性和事件
    ColorPicker颜色选择器支持 el-color-picker 的所有属性和事件
    Tree树形控件支持 el-tree 的所有属性和事件
    TreeSelect树形选择支持 el-tree-select 的所有属性和事件
    TreeV2虚拟化树形控件支持 el-tree-v2 的所有属性和事件

    存在的问题

    还没找到办法支持所有 xType 的所有方法,如果需要用到组件的方法,目前只能用 slotName 引入 Element 原生组件,有想法的伙伴可以交流一下
    由于获取不到 el-tree 的方法,Tree 和 TreeV2 组件目前还不能正确回显和数据绑定
    目前已支持大部分的表单类型,还缺少一个 LasySelect 懒加载,带有空封装
    需要的伙伴可以在此基础拓展

    此项目不再维护,如需学习或者使用,可以把源码拷贝到本地进行拓展。

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    发一条! 发一条!
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    🕛

    本站已运行 2 年 63 天 15 小时 56 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事
     
     
     
     
    壁纸