Medical UI Docs

# FormModel双向绑定表单

# 标准表单

dataSource包含所有控件







 
































































































































































<template>
  <div>
    <div>
      <med-s-form-model :form="form" :responsive="responsive" :dataSource="dataSource"/>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          formFieldRadio: '1' //默认值
        },
        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,
            buttonType: true,
            buttonStyle: 'solid',
            optionList: [
              {
                label: 'radio选项1',
                value: '0',
                disabled: true,
              },
              {
                label: 'radio选项2',
                value: '1',
              },
            ],
          },
          {
            labelText: '多选框',
            type: 'checkbox',
            fieldName: 'formFieldCheckbox',
            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>
显示代码

# 带按钮的表单







 





































<template>
  <div>
    <div>
      <med-s-form-model showBtn :form="form" :responsive="responsive" :dataSource="dataSource" @submit="submit"/>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        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: 12, lg: 12, md: 12, sm: 24, xs: 24 }
          },
        ],
      }
    },
    methods:{
      submit() {
        console.log('表单填写的数据：', this.form)
      }
    }
  }
</script>
显示代码

# 替换默认提交按钮







 





































<template>
  <div>
    <div>
      <med-s-form-model showBtn :form="form" :responsive="responsive" :dataSource="dataSource">
        <template #footer>
          <med-button>自定义的按钮</med-button>
        </template>
      </med-s-form-model>
    </div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        form: {},
        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: 12, lg: 12, md: 12, sm: 24, xs: 24 }
          },
        ],
      }
    }
  }
</script>
显示代码

# 带校验的表单







 







































<template>
  <div>
    <div>
      <med-s-form-model showBtn :form="form" :responsive="responsive" :dataSource="dataSource" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form:{},
        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()
            },
          },
        ]
      }
    }
  }
</script>
显示代码

# 几个事件的示例

设置值 校验值

打开F12查看效果






 






















































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

# 参数列表

参数 方式 示例 解释
form Prop form="{}" 【必填项】表单双向绑定的对象，即表单内容得到的key-value对象
dataSource Prop dataSource="[]" 【必填项】数据源
formLayout Prop formLayout="{ labelCol: { span: 8 }, wrapperCol: { span: 16 } }" 全局控件的标签和输入框占位大小
responsive Prop size="{ xl: 6, lg: 8, md: 12, sm: 24, xs: 24 }" 全局控件的栅格布局
showBtn Prop showBtn="false" 是否展示默认的提交按钮
gutter Prop gutter="48" 控件的间距
bordered Prop bordered="true" 是否显示边框
size Prop size="default" 控件的尺寸,可选值small large
customRender Prop h => { return h('div', 123) } 自定义渲染内容
footer Slots <template #footer>footer</template> 插槽，替换底部按钮
customItem Slots <template #customItem>footer</template> 插槽，添加自定义的表单控件
submit Emit @submit="submit" 提交事件
reset Emit @reset="reset" 重置事件
clear Emit @clear="clear" 清空校验状态事件

# dataSource数据源

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

# 事件

参数 方式 示例 解释
submit Prop this.$refs.table.submit() 提交表单,触发校验
clear Prop this.$refs.table.clear() 清空校验状态
validateValue Prop this.$refs.table.validateValue(key) 校验指定控件,可以为string,array,或者不传

Button按钮