form表单的一般用法
一般UI库都会提供一个form控件，非常方便好用，自己其中的item还是需要一行一行的写，比较麻烦。那么能不能循环出来呢？
官网实例，element-plus为例：element-plus.gitee.io/#/zh-CN/com…
<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item label="即时配送"> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源"> <el-radio-group v-model="form.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </el-form> 复制代码
好长，有点眼晕。这个表单只有七个成员，如果再多点代码会更长。
话说，大家都是怎么做的？不会都是这么写的吧。
这里抛砖引玉，说一下我的方法。
前提条件
想要for循环，直接用这样的组件应该是不可能的，组件名称不一样，组件的参数也都不一样（v-model除外），下拉列表这一类的还需要各种属性设置。这个怎么循环？ 所以要先做两件事情：封装组件统一接口、封装注册方法。
封装组件
这个就是一个辛苦活，需要核对官网文档，一个一个属性校对，把属性合并成一个大的对象，统一传递进去。 以el-input 为例：
<!--单行文本--> <template> <el-input v-model="value" @input="myInput" :id="meta.controlId" :name="'c' + meta.controlId" :disabled="meta.disabled" :readonly="meta.readonly" :maxlength="meta.maxlength" :minlength="meta.minlength" :placeholder="meta.placeholder" :autofocus="meta.autofocus" :autocomplete="meta.autocomplete" :title="meta.title" :show-word-limit="meta.ele.show_word_limit" :clearable="meta.ele.clearable" :validate_event="meta.ele.validate_event" :resize="meta.ele.resize" > </el-input> </template> <script> import inputManage from '../manage/inputManage.js' import { metaInput } from '../manage/config.js' export default { name: 'nf-text', props: { modelValue: String, meta: metaInput }, emits: ['input', 'change', 'blur', 'focus', 'clear'], setup (props, context) { const { value, myInput } = inputManage(props, context) return { value, myInput } } } </script> 复制代码
这里把共用的函数都拿出来放在了单独的js文件里面，这样便于扩展其他组件。
- inputManage.js
不大会起名，不是太准确，以后可能会调整。
/* input 文本类的管理类，就是共用代码了。 */ import { ref, watch } from 'vue' const inputManage = (props, context) => { // 设置默认值 const value = ref(props.meta.defaultValue) // 监听属性，给 value 赋值 watch(() => props.modelValue, (v1, v2) => { value.value = v1 }) // 向父组件提交事件 const myInput = (e) => { context.emit('update:modelValue', e) context.emit('input', e) } return { value, myInput } } export default inputManage 复制代码
统一处理value和提交用的emit。
因为 element-plus 把原生的 value 变成了v-model，所以不能直接使用组件的属性，需要转换一下。
- config.js
// 表单域控件类型 const formControlType = { 100: 'textarea', // 多行文本框 input-text 101: 'text', // 单行文本框 input-text 102: 'password', // 密码 input-password 103: 'tel', // 电话 input-text 104: 'email', // 电子邮件 input-text 105: 'url', // url input-url 106: 'search', // 搜索 input-text 107: 'color', // 颜色 input-color 108: 'text', // 弹窗选择记录 110: 'date', // 日期 input-date 111: 'datetime-local', // 日期时间 112: 'time', // 时间 113: 'week', // 年月 114: 'month', // 年周 120: 'number', // 数字 121: 'range', // 滑块 130: 'file', // 上传文件 131: 'file', // 上传图片 140: 'fulltext', // 富文本编辑器 150: 'checkbox', // 勾选 152: 'checkboxs', // 多选组 153: 'radios', // 单选组 170: 'select', // 下拉列表框 单选 171: 'selects', // 列表框 多选 172: 'selectMore' // 联动下拉列表框 } // 表单域，文本类控件属性 const metaText = { type: Object, default: () => { return { // 通用 controlId: Number, // 编号，区别同一个表单里的其他控件 colName: String, // 字段名称 label: String, // 中文名称 controlType: Number, // 用类型编号表示type isClear: { // isClear 连续添加时是否恢复默认值 type: Boolean, default: false }, defaultValue: String, // 默认值 autofocus: { // 是否自动获得焦点 type: Boolean, default: false }, disabled: { // 是否禁用 type: Boolean, default: false }, required: { // 必填 type: Boolean, default: true }, readonly: { // 只读 type: Boolean, default: false }, pattern: String, // 用正则做验证。 class: { type: String, default: '' }, placeholder: String, title: String, // 提示信息 size: Number, // 字符宽度 maxlength: Number, // 最大字符数 minlength: Number, // 最小字符数 autocomplete: { // off type: String, default: 'on' }, optionKey: String, // 备选文字标识 optionItem: Object, // 备选的选项 // 多行文本 rows: Number, // 行数 autosize: Object, // 自适应内容高度 // 数字 max: Number, min: Number, step: Number, ele: { type: Object, default: () => { return { show_word_limit: { // 是否显示输入字数统计 text和area有效 type: Boolean, default: true }, clearable: { // 是否显示清空标记 type: Boolean, default: true }, show_password: { // 是否显示切换密码图标 type: Boolean, default: true }, validate_event: { // 输入时是否触发表单的校验 type: Boolean, default: true }, resize: String // none, both, horizontal, vertical } } } } } } export default { formControlType, metaText // 文本类的属性 } 复制代码
定义组件类型，以及组件需要的属性。目前是针对text做的属性，后期可能会拆分开。
封装注册方法
组件分为全局注册和局部注册。
- 一般的局部注册是这样的：
import eltext from '@/components/nf-el-form/t-text.vue' import elarea from '@/components/nf-el-form/t-area.vue' import elurl from '@/components/nf-el-form/t-url.vue' import elnumber from '@/components/nf-el-form/n-number.vue' import elrange from '@/components/nf-el-form/n-range.vue' import eldate from '@/components/nf-el-form/d-date.vue' import eltime from '@/components/nf-el-form/d-time.vue' import elradios from '@/components/nf-el-form/s-radios.vue' import elcheckbox from '@/components/nf-el-form/s-checkbox.vue' import elselect from '@/components/nf-el-form/s-select.vue' import elswitch from '@/components/nf-el-form/s-switch.vue' export default { name: 'eleBase', components: { eltext, elarea, elurl, elnumber, elrange, eldate, eltime, elradios, elcheckbox, elselect, elswitch }, 复制代码
显然太麻烦了。以后增加组件怎么办？到处修改吗？所以还是需要封装一下。
- 使用动态组件和异步组件进行注册
import elFormConfig from '@/components/nf-el-form/map-el-form.js' export default { name: 'plat-help-form-item-json', components: { ...elFormConfig.formItemList }, setup () { const ctlList = elFormConfig.formItemListKey return { ctlList } } 复制代码
引入js文件，一行搞定。
实现v-for遍历
然后我们就可以愉快的for了。
<el-form ref="form" :model="model" label-width="100px"> <el-form-item label="活动名称："> <component :is="ctlList[101]" v-model="model.name" :meta="metaText"></component> </el-form-item> <el-form-item label="网站网址："> <component :is="ctlList[105]" v-model="model.url" :meta="metaText"></component> </el-form-item> <el-form-item label="活动内容："> <component :is="ctlList[100]" v-model="model.contact" :meta="metaText"></component> </el-form-item> <el-form-item label="开始日期："> <component :is="ctlList[110]" v-model="model.date" :meta="metaText"></component> </el-form-item> </el-form> 复制代码
这样接口统一了，只需要准备好一份json文件，就可以v-for了。 这样表单里的控件再多也不用怕了，统统for出来。
效果
这个没啥好看的，因为和正常的el-form也没啥区别。
