element form 二次封装
2021/8/15 23:07:49
本文主要是介绍element form 二次封装,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<template> <div> <!-- form 总共包含 单选框 多选框 输入框 选择器 日期时间选择器 formDate: { formModel: {}, // 表单数据对象 rules: {}, // 表单验证规则 inline: false, // boolean 行内表单模式 labelPosition:'', // right/left/top 表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width formContent: [ { formItemLabel: '', // 标签 formType: 'text', // 判断类型 Model: '', // 绑定值 inputPlaceholder: '', // 提示语 readonly: false, // boolean 只读 }, { formItemLabel: '', // 标签 formType: 'select', Model: '', selectPlaceholder: '', checkType: '', // 当需要change方法时 用来做使用方法判断的 options: [ { value: '我是隐藏的和获取的值', label: '我是显示的值' } ] // 选项的值 }, { formItemLabel: '', // 标签 formType: 'radio', // radioButton 按钮形式 radio 普通形式 Model: '', size: '', // medium / small / mini *Radio 的尺寸,仅在 border 为真时有效 radio: [{ label: '', // 标题 disabled: false, // 禁用 border: false // 边框 radio }] }, { formItemLabel: '', // 标签 formType: 'checkbox', Model: '', size: '', // medium / small / mini *多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 checkbox: [{ label: '', // 标题 disabled: false, // 禁用 border: false // 边框 radio }] }, { formItemLabel: '', // 标签 formType: 'dateTimeDicker', Model: '', type: '', // year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange dateTimeDickerPlaceholder: '', format: '', // 格式 valueFormat: '' // 格式 } ], } --> <el-form :model="formDate.formModel" :rules="formDate.rules" :inline="formDate.inline" :label-position="formDate.labelPosition" label-width="auto" > <slot name="formTop" /> <el-form-item v-for="(item, key) in formDate.formContent" :key="key" :label="item.formItemLabel" :prop="item.Model" > <!-- 输入框 --> <el-input v-if="item.formType == 'text' || item.formType == 'textarea'" v-model="formDate.formModel[item.Model]" :type="item.formType" :placeholder="item.inputPlaceholder" :readonly="item.readonly" /> <!-- 选择器 --> <el-select v-if="item.formType == 'select'" v-model="formDate.formModel[item.Model]" :placeholder="item.selectPlaceholder" clearable filterable @change="selectChange(item.checkType)" > <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value" /> </el-select> <!-- 单选框 --> <el-radio-group v-if="item.formType == 'radio' || item.formType == 'radioButton'" v-model="formDate.formModel[item.Model]" :size="item.size" > <!-- 普通单选框 --> <template v-if="item.formType == 'radio'" > <el-radio v-for="(radio, key1) in item.radio" :key="key1" :label="radio.label" :border="radio.border" :disabled="radio.disabled" /> </template> <!-- 按钮形式的单选框 --> <template v-if="item.formType == 'radioButton'" > <el-radio-button v-for="(radio, key1) in item.radio" :key="key1" :label="radio.label" :disabled="radio.disabled" /> </template> </el-radio-group> <!-- 复选框 --> <el-checkbox-group v-model="formDate.formModel[item.Model]" :size="item.size" > <el-checkbox v-for="(checkbox, key2) in item.checkbox" :key="key2" :label="checkbox.label" :border="checkbox.border" :disabled="checkbox.disabled" :name="item.Model" > {{ checkbox.label }} </el-checkbox> </el-checkbox-group> <!-- 日期时间选择器 --> <el-date-picker v-if="item.formType == 'dateTimeDicker'" v-model="formDate.formModel[item.Model]" :type="item.type" :placeholder="item.dateTimeDickerPlaceholder" :format="item.format" :value-format="item.valueFormat" /> </el-form-item> </el-form> </div> </template> <script> export default { props: { formDate: { type: Object, default: () => {} } }, methods: { selectChange(checkType) { console.log(checkType) if (checkType === undefined) { // console.log('und') } else { console.log('父组件方法') this.$emit('selectChange', checkType) } } } } </script>
这篇关于element form 二次封装的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南