update

src/components/elem-form/checkbox-group-form/elemInfo.md

+## 组件简介
+
+|  字段值  | 说明                       | 字段属性 | 默认值 |
+| ------- | ------------------------- | ------- | ----- |
+| `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `checkbox-group-form` |
+| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
+| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
+| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
+| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
+| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
+| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
+| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
+| `values` | 类型：`Array`; 说明：里面是选择类型值label和value(值可以是 int 或 str)，选择组 | 自定义字段 | `[]` |
+| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
+| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
+
+### Demo:
+``` js
+return {
+  type: 'checkbox-group-form',
+  label: '性别',
+  labelWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'gender', // 特别注意，这个model是数组
+  modelWidth: '',
+  values: [{ label: '男', value: 1 }, { label: '女', value: 2 }],
+  attrs: {},
+  rules: []
+}
+```
+
+* 其他属性 [参考文档]([https://](https://element.eleme.cn/#/zh-CN/component/input))

src/components/elem-form/checkbox-group-form/index.js

+import CheckboxGroup from './src/checkboxGroupForm'
+
+/* istanbul ignore next */
+CheckboxGroup.install = function (Vue) {
+  Vue.component(CheckboxGroup.name, CheckboxGroup)
+}
+
+export default CheckboxGroup

src/components/elem-form/checkbox-group-form/src/checkboxGroupForm.vue

+<template>
+  <div class="radio-group-form">
+    <el-form-item
+      :key="item.model"
+      :prop="item.model"
+      :label="item.label || ''"
+      :label-width="item.labelWidth || item['label-width'] || ''"
+      :required="item.required || false"
+      :rules="item.rules || []"
+      :size="item.size"
+    >
+      <el-checkbox-group
+        v-bind="item.attrs"
+        v-on="$listeners"
+        v-model="formData[item.model]"
+        :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
+        :disabled="item.disabled || false"
+      >
+        <el-checkbox
+          v-for="checkbox in item.values"
+          :label="checkbox.value"
+          :key="checkbox.value"
+        >{{checkbox.label}}</el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxGroupForm',
+  componentName: 'CheckboxGroupForm',
+  props: {
+    item: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {}
+  }
+}
+</script>

src/components/elem-form/city-select-form/elemInfo.md

@@ -16,20 +16,20 @@
 
 ### Demo Example:
 ``` js
-{
-  'type': 'city-select-form',
-  'label': '现居住城市',
-  'label-width': '160px',
-  'required': true,
-  'disabled': false,
-  'model': 'city_select_str',
-  'separator': '-',
-  'model-width': '',
-  'placeholder0': '请输入省份',
-  'placeholder1': '请输入城市',
-  'attrs0': {},
-  'attrs1': {},
-  'rules': []
+return {
+  type: 'city-select-form',
+  label: '现居住城市',
+  labelWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'city_select_str',
+  separator: '-',
+  modelWidth: '',
+  placeholder0: '请输入省份',
+  placeholder1: '请输入城市',
+  attrs0: {},
+  attrs1: {},
+  rules: []
 }
 ```
 

src/components/elem-form/date-picker-form/elemInfo.md

@@ -16,18 +16,18 @@
 
 ### Demo:
 ``` js
-{
-  'type': 'date-picker-form',
-  'elemType': '',
-  'label': '出生日期',
-  'label-width': '160px',
-  'required': true,
-  'disabled': false,
-  'model': 'birthday',
-  'model-width': '',
-  'placeholder': '请选择出生日期',
-  'attrs': { 'value-format': 'yyyy-MM-dd' },
-  'rules': []
+return {
+  type: 'date-picker-form',
+  elemType: '',
+  label: '出生日期',
+  labelWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'birthday',
+  modelWidth: '',
+  placeholder: '请选择出生日期',
+  attrs: { 'value-format': 'yyyy-MM-dd' },
+  rules: []
 }
 ```
 

src/components/elem-form/date-picker-from-to-form/elemInfo.md

@@ -18,20 +18,20 @@
 
 ### Demo:
 ``` js
-{
-  'type': 'date-picker-from-to-form',
-  'elemType': '',
-  'label': '出生日期',
-  'required': true,
-  'disabled': false,
-  'label-width': '160px',
-  'model': 'work_time',
-  'model-width': '',
-  'rangeSeparator': '至',
-  'startPlaceholder': '请选择开始时间',
-  'endPlaceholder': '请选择结束时间',
-  'attrs': { 'value-format': 'yyyy-MM-dd' },
-  'rules': []
+return {
+  type: 'date-picker-from-to-form',
+  elemType: '',
+  label: '出生日期',
+  required: true,
+  disabled: false,
+  labelWidth: '160px',
+  model: 'work_time',
+  modelWidth: '',
+  rangeSeparator: '至',
+  startPlaceholder: '请选择开始时间',
+  endPlaceholder: '请选择结束时间',
+  attrs: { 'value-format': 'yyyy-MM-dd' },
+  rules: []
 }
 ```
 

src/components/elem-form/index.js

@@ -32,6 +32,7 @@ import CitySelectForm from './city-select-form'
 import DatePickerForm from './date-picker-form'
 import DatePickerFromToForm from './date-picker-from-to-form'
 import RadioGroupForm from './radio-group-form'
+import CheckboxGroupForm from './checkbox-group-form'
 import UploadForm from './upload-form'
 
 const components = [
@@ -42,6 +43,7 @@ const components = [
   DatePickerForm,
   DatePickerFromToForm,
   RadioGroupForm,
+  CheckboxGroupForm,
   UploadForm
 ]
 
@@ -101,5 +103,6 @@ export default {
   DatePickerForm,
   DatePickerFromToForm,
   RadioGroupForm,
+  CheckboxGroupForm,
   UploadForm
 }

src/components/elem-form/input-form/elemInfo.md

@@ -15,27 +15,27 @@
 
 ### Demo Example:
 ``` js
-{
-  'type': 'input-form',
-  'label': '姓名',
-  'label-width': '160px',
-  'required': true,
-  'disabled': false,
-  'model': 'real_name_cn',
-  'model-width': '',
-  'placeholder': '请输入姓名',
-  'attrs': {},
-  'rules': [
+return {
+  type: 'input-form',
+  label: '姓名',
+  labelWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'real_name_cn',
+  modelWidth: '',
+  placeholder: '请输入姓名',
+  attrs: {},
+  rules: [
     {
-      'required': true,
-      'message': '请输入姓名',
-      'trigger': 'blur'
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur'
     },
     {
-      'min': 3,
-      'max': 5,
-      'message': '长度在 3 到 5 个字符',
-      'trigger': 'blur'
+      min: 3,
+      max: 5,
+      message: '长度在 3 到 5 个字符',
+      trigger: 'blur'
     }
   ]
 }

src/components/elem-form/radio-group-form/elemInfo.md

@@ -16,17 +16,17 @@
 
 ### Demo:
 ``` js
-{
-  'type': 'radio-group-form',
-  'label': '性别',
-  'label-width': '160px',
-  'required': true,
-  'disabled': false,
-  'model': 'gender',
-  'model-width': '',
-  'values': [{ 'label': '男', 'value': 1 }, { 'label': '女', 'value': 2 }],
-  'attrs': {},
-  'rules': []
+return {
+  type: 'radio-group-form',
+  label: '性别',
+  labelWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'gender',
+  modelWidth: '',
+  values: [{ label: '男', value: 1 }, { label: '女', value: 2 }],
+  attrs: {},
+  rules: []
 }
 ```
 

src/components/elem-form/select-form/elemInfo.md

@@ -16,24 +16,24 @@
 
 ### Demo Example:
 ``` js
-{
-  'type': 'select-form',
-  'label': '证件类型',
-  'label-width': '160px',
-  'required': true,
-  'disabled': false,
-  'model': 'id_type',
-  'model-width': '',
-  'placeholder': '请选择证件类型',
-  'values': [
-    { 'label': '居民身份证', 'value': 0 },
-    { 'label': '港澳台身份证', 'value': 1 },
-    { 'label': '护照号', 'value': 2 },
-    { 'label': '军官证', 'value': 3 },
-    { 'label': '其他', 'value': 9 }
+return {
+  type: 'select-form',
+  label: '证件类型',
+  labelWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'id_type',
+  modelWidth: '',
+  placeholder: '请选择证件类型',
+  values: [
+    { label: '居民身份证', value: 0 },
+    { label: '港澳台身份证', value: 1 },
+    { label: '护照号', value: 2 },
+    { label: '军官证', value: 3 },
+    { label: '其他', value: 9 }
   ],
-  'attrs': {},
-  'rules': []
+  attrs: {},
+  rules: []
 }
 ```
 

src/components/elem-form/textarea-form/elemInfo.md

@@ -15,31 +15,31 @@
 
 ### Demo:
 ``` js
-{
-  'type': 'textarea-form',
-  'label': '工作描述',
-  'required': true,
-  'disabled': false,
-  'label-width': '160px',
-  'model': 'work_info',
-  'model-width': '',
-  'placeholder': '请详细描述您的职责范围，工作任务以及取得的成绩等，填写文字在100个字以上评定等级，少于不计算，内容越详细，等级越高。（字限3000字以内）',
-  'attrs': {
-    'rows': '8',
-    'maxlength': '1000',
+return {
+  type: 'textarea-form',
+  label: '工作描述',
+  required: true,
+  disabled: false,
+  labelWidth: '160px',
+  model: 'work_info',
+  modelWidth: '',
+  placeholder: '请详细描述您的职责范围，工作任务以及取得的成绩等，填写文字在100个字以上评定等级，少于不计算，内容越详细，等级越高。（字限3000字以内）',
+  attrs: {
+    rows: '8',
+    maxlength: '1000',
     'show-word-limit': true
   },
-  'rules': [
+  rules: [
     {
-      'required': true,
-      'message': '请输入内容',
-      'trigger': 'blur'
+      required: true,
+      message: '请输入内容',
+      trigger: 'blur'
     },
     {
-      'min': 60,
-      'max': 1000,
-      'message': '长度在 60 到 1000 个字符',
-      'trigger': 'blur'
+      min: 60,
+      max: 1000,
+      message: '长度在 60 到 1000 个字符',
+      trigger: 'blur'
     }
   ]
 }

src/components/elem-form/upload-form/elemInfo.md

@@ -18,22 +18,22 @@
 
 ### Demo Example:
 ``` js
-{
-  'type': 'upload-form',
-  'label': '姓名',
-  'label-width': '160px',
-  'required': true,
-  'disabled': false,
-  'model': 'uploadArrs',
-  'action': '',
-  'data': {
+return {
+  type: 'upload-form',
+  label: '姓名',
+  labeWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'uploadArrs',
+  action: '',
+  data: {
 
   },
-  'deleteAction': '',
-  'deleteData': {
+  deleteAction: '',
+  deleteData: {
 
   },
-  'html': `
+  html: `
     <div style="color: #72818c; font-size: 14px;">
       <p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
       <p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
@@ -41,15 +41,15 @@
       <p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式，文件小于10MB。</p>
     </div>
   `,
-  'attrs': {
-    'multiple': false
-    'limit': 1
+  attrs: {
+    multiple: false,
+    limit: 1
   },
-  'rules': [
+  rules: [
     {
-      'required': true,
-      'message': '请上传',
-      'trigger': 'blur'
+      required: true,
+      message: '请上传',
+      trigger: 'blur'
     }
   ]
 }