官网表单实例

一般UI库都会提供一个form控件，非常方便好用，自己其中的item还是需要一行一行的写，比较麻烦。那么能不能循环出来呢？

官网实例，element-plus为例：
https://element-plus.gitee.io/#/zh-CN/component/form

<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也没啥区别。

001表单效果.png

源码：（不断完善中）

https://github.com/naturefwvue/nf-vue-element