# Form 表单

# 卡片表单

dataSource包含目前兼容的所有控件

<template>
  <div>
    <div>
      <med-s-form  layout="card" :responsive="responsive" :dataSource="dataSource"/>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 },
        dataSource: [
          {
            labelText: '开关',
            type: 'switch',
            fieldName: 'switchs',
            // defaultChecked: true,
            disabled: true,
            change: () => {
              console.log('change')
            }
          },
          {
            labelText: '输入框',
            type: 'text',
            placeholder: '文本输入区域',
            fieldName: 'formFieldText',
            required: true,
            wrongMsg: '请输入文本',
            responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 }
          },
          {
            labelText: '输入框',
            type: 'textarea',
            placeholder: '文本输入区域',
            fieldName: 'formFieldTextArea',
            required: true,
            wrongMsg: '请输入文本',
            autoSize: {
              minRows: 1,
            },
            responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 }
          },
          {
            labelText: '数字输入框',
            type: 'number',
            fieldName: 'formFieldNumber',
            placeholder: '这只是一个数字的文本输入框',
          },
          {
            labelText: '单选框',
            type: 'radio',
            fieldName: 'formFieldRadio',
            required: true,
            initialValue: '1',
            buttonType: true,
            buttonStyle: 'solid',
            optionList: [
              {
                label: 'radio选项1',
                value: '0',
                disabled: true,
              },
              {
                label: 'radio选项2',
                value: '1',
              },
            ],
          },
          {
            labelText: '多选框',
            type: 'checkbox',
            fieldName: 'formFieldCheckbox',
            initialValue: ['0'],
            optionList: [
              {
                label: '选项1',
                value: '0',
                disabled: true,
              },
              {
                label: '选项2',
                value: '1',
              },
            ],
          },
          {
            labelText: '日期选择',
            type: 'datetime',
            fieldName: 'formField4',
            placeholder: '选择日期',
          },
          {
            labelText: '日期范围',
            type: 'datetimeRange',
            fieldName: 'formField5',
            placeholder: ['开始日期', '选择日期'],
          },
          {
            labelText: '下拉框',
            type: 'select',
            fieldName: 'formField7',
            placeholder: '下拉选择你要的',
            optionList: [
              {
                label: 'text1',
                value: '0',
              },
              {
                label: 'text2',
                value: '1',
              },
            ],
          },
          {
            labelText: '联动',
            type: 'cascader',
            fieldName: 'formField6',
            placeholder: '级联选择',
            optionList: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                      {
                        value: 'xiasha',
                        label: 'Xia Sha',
                        disabled: true,
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua men',
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      }
    },
  }
</script>

# 行内表单

dataSource包含目前兼容的所有控件

<template>
  <div>
    <div>
      <med-s-form layout="inline" :responsive="responsive" :dataSource="dataSource"/>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 },
        dataSource: [
          {
            labelText: '输入框',
            type: 'text',
            placeholder: '文本输入区域',
            fieldName: 'formFieldText',
            required: true,
            wrongMsg: '请输入文本',
          },
          {
            labelText: 'textarea输入框',
            type: 'textarea',
            placeholder: '文本输入区域',
            fieldName: 'formFieldTextArea',
            required: true,
            wrongMsg: '请输入文本',
            autoSize: {
              minRows: 1,
            },
          },
          {
            labelText: '数字输入框',
            type: 'number',
            fieldName: 'formFieldNumber',
            placeholder: '这只是一个数字的文本输入框',
          },
          {
            labelText: '单选框',
            type: 'radio',
            fieldName: 'formFieldRadio',
            required: true,
            initialValue: '1',
            buttonType: true,
            buttonStyle: 'solid',
            optionList: [
              {
                label: 'radio选项1',
                value: '0',
                disabled: true,
              },
              {
                label: 'radio选项2',
                value: '1',
              },
            ],
          }
        ],
      }
    },
  }
</script>

# 带插槽的表单

<template>
  <div>
    <div>
      <med-s-form layout="inline" :responsive="responsive" :dataSource="dataSource">
        <template #customItem>
          <a-form-item>
            我是自定义的插槽：
            <a-input placeholder="输入"/>
          </a-form-item>
        </template>
      </med-s-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 },
        dataSource:[
          {
            labelText: '输入框',
            type: 'text',
            placeholder: '文本输入区域',
            fieldName: 'formFieldText',
            required: true,
            wrongMsg: '请输入文本',
          }
        ],
      }
    },
  }
</script>

# 提交点击事件

<template>
  <div>
    <div>
      <med-s-form layout="inline" :responsive="responsive" :dataSource="dataSource" @submit="submit"></med-s-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 },
        dataSource: [
          {
            labelText: '输入框',
            type: 'text',
            placeholder: '文本输入区域',
            fieldName: 'formFieldText',
            required: true,
            wrongMsg: '请输入文本',
          }
        ],
      }
    },
    methods:{
      submit(formParam) {
        console.log('表单填写的数据：',formParam)
      }
    }
  }
</script>

# 带校验的表单

获取Value

<template>
  <div>
    <med-button @click="getValue">获取Value</med-button>
    <div>
      <med-s-form  :responsive="responsive" :dataSource="dataSource"/>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        responsive: { xl: 8, lg: 8, md: 12, sm: 24, xs: 24 },
        dataSource: [
          {
            labelText: '输入框',
            type: 'text',
            placeholder: '文本输入区域',
            fieldName: 'formFieldText',
            required: true,
            wrongMsg: '请输入文本',
            validator: (rule, value, cb) => {
              if (value && value.startsWith(1)) {
                cb('不能以1开头')
              }
              cb()
            }
          },
          {
            labelText: '数字输入框',
            type: 'number',
            fieldName: 'formFieldNumber',
            placeholder: '这只是一个数字的文本输入框',
            validator: (rule, value, cb) => {
              if (value && value < 5) {
                cb('不能小于5')
              }
              cb()
            },
          },
        ]
      }
    },
    methods:{
      getValue() {
        const res = this.$refs.form.getValue()
        console.log(res)
      }
    }
  }
</script>

# 几个事件的示例

获取值

设置值

校验值

打开F12查看效果

<template>
  <div>
    <div style="display:flex;">
      <med-button type="primary" @click="getValue">获取值</med-button>
      <med-button type="danger" @click="setValue">设置值</med-button>
      <med-button active @click="validateValue">校验值</med-button>
    </div>
    <div>
      <med-s-form :dataSource="dataSource" ref="form"/>
    </div>
  </div>
</template>
<script>
  const dataSource = [
    {
      labelText: '输入框',
      type: 'text',
      placeholder: '文本输入区域',
      fieldName: 'formFieldText',
      required: true,
      wrongMsg: '请输入文本'
    },
    {
      labelText: '单选框',
      type: 'radio',
      fieldName: 'formFieldRadio',
      required: true,
      initialValue: '1',
      buttonType: true,
      buttonStyle: 'solid',
      optionList: [
        {
          label: 'radio选项1',
          value: '0',
          disabled: true,
        },
        {
          label: 'radio选项2',
          value: '1',
        },
      ],
    },
  ]
  export default {
    data() {
      return {
        dataSource
      }
    },
    methods:{
      getValue() {
        const res = this.$refs.form.getValue()
        console.log(res)
      },
      setValue() {
        this.$refs.form.setValue({ formFieldText: 1 })
      },
      validateValue() {
        this.$refs.form.validateValue(['formFieldText'])
      }
    }
  }
</script>

# 参数列表

参数	方式	示例	解释
dataSource	Prop	dataSource="[]"	【必填项】数据源
responsive	Prop	size="{ xl: 6, lg: 8, md: 12, sm: 24, xs: 24 }"	全局控件的栅格布局
formLayout	Prop	formLayout="{ labelCol: { span: 8 }, wrapperCol: { span: 16 } }"	全局控件的标签和输入框占位大小
gutter	Prop	gutter="48"	控件的间距
layout	Prop	layout="card"	设置表单布局，可选值card inline
formTitle	Prop	formTitle="表单标题"	仅在layout为card时生效，表单标题
maxItem	Prop	maxItem="1"	超过多少个折叠
bordered	Prop	bordered="true"	是否显示边框
customRender	Prop	h => { return h('div', 123) }	自定义渲染内容
size	Prop	size="default"	控件的尺寸,可选值small large
customItem	Slots	<template #customItem>footer</template>	插槽，添加自定义的表单控件
submit	Emit	@submit="submit"	提交事件

# dataSource数据源

参数	方式	示例	解释
labelText	Property	labelText:"姓名"	控件标签名
type	Property	type:"text"	控件类型，可选 text输入框 textarea输入框 number数字输入框 radio单选框 checkbox复选框 select下拉框 datetime时间选择 datetimeRange时间段选择 cascader级联选择
fieldName	Property	fieldName:"formText"	控件值绑定的字段
initialValue	Property	initialValue:"1" \| initialValue: ['1']	控件的默认值
placeholder	Property	placeholder:"我是缺省提示语句"	提示语句
optionList	Property	optionList:"[]"	有多个选择项时的数据源
required	Property	required:"ture"	是否是必填
disabled	Property	disabled:"ture"	禁用选项，部分控件生效
wrongMsg	Property	wrongMsg:"报错信息"	报错提示信息
responsive	Prop	size="{ xl: 6, lg: 8, md: 12, sm: 24, xs: 24 }"	单独控件的栅格布局
formLayout	Prop	formLayout="{ labelCol: { span: 8 }, wrapperCol: { span: 16 } }"	单独控件的标签和输入框占位大小
trigger	Property	trigger:"blur"	触发校验的时机，可选blur change 等
format	Property	format:"YYYY-MM-DD hh:mm:ss"	针对时间控件的显示，进行格式化
valueFormat	Property	valueFormat:"YYYY-MM-DD hh:mm:ss"	针对时间控件的值，进行格式化
validator	Property	validator: (rule, value, callback) => { if (value && value.startsWith(1)) {callback('不能以1开头')callback()}	自定义校验，callback必须执行

# 事件

参数	方式	示例	解释
submit	Prop	this.$refs.table.submit()	提交表单,触发校验
reset	Prop	this.$refs.table.reset(key)	重置表单,传key为指定控件,不传则是全部
getValue	Prop	this.$refs.table.getValue(key)	获取当前表单指定的键值,可以为string,array,或者不传
setValue	Prop	this.$refs.table.setValue({key:value})	设置当前表单值,形式为键值对
validateValue	Prop	this.$refs.table.validateValue(key)	校验指定控件,可以为string,array,或者不传

Table表格 FormModel双向绑定表单