# form

# 使用示例

ykc-form 基础用法

<template>
  <ykc-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <ykc-form-item label="方案名称" prop="name">
      <ykc-input v-model="ruleForm.name"></ykc-input>
    </ykc-form-item>
    <ykc-form-item label="机构名称" prop="orgName">
      <ykc-input v-model="ruleForm.orgName">
        <template slot="prepend">元</template>
      </ykc-input>
    </ykc-form-item>
    <ykc-form-item label="机构名称1" prop="orgName1">
      <ykc-input v-model="ruleForm.orgName1">
        <template slot="append">元</template>
      </ykc-input>
    </ykc-form-item>
    <ykc-form-item
      label="温馨提示"
      prop="tips"
      tip="温馨提示：这是温馨提示这是温馨提示"
      isAskShow="问号提示内容"
      @askClick="askClick">
      <ykc-input v-model="ruleForm.tips"></ykc-input>
    </ykc-form-item>
    <ykc-form-item label="选择日期" prop="date">
      <ykc-date-picker v-model="ruleForm.date"></ykc-date-picker>
    </ykc-form-item>
    <ykc-form-item label="图片上传" prop="img">
      <ykc-upload checkField="img" @handleChange="uploadImg"></ykc-upload>
    </ykc-form-item>
    <ykc-form-item label="机构类型" prop="orgType">
      <ykc-radio
        :data="[
          { id: '1', name: '类型1' },
          { id: '2', name: '类型2' },
          { id: '3', name: '类型3' },
        ]"
        v-model="ruleForm.orgType"></ykc-radio>
    </ykc-form-item>
    <ykc-form-item label="文件上传" prop="file">
      <ykc-upload type="files" checkField="file" @handleChange="uploadFile"></ykc-upload>
    </ykc-form-item>
    <ykc-form-item label="选择标签" prop="label">
      <ykc-checkbox
        :data="[
          { id: '1', name: '标签1' },
          { id: '2', name: '标签2' },
          { id: '3', name: '标签3' },
        ]"
        v-model="ruleForm.label"></ykc-checkbox>
    </ykc-form-item>
    <ykc-form-item label="下拉选择" prop="dropdown">
      <ykc-dropdown
        :data="[
          { id: '1', name: '选择1' },
          { id: '2', name: '选择2' },
          { id: '3', name: '选择3' },
        ]"
        v-model="ruleForm.dropdown"></ykc-dropdown>
    </ykc-form-item>
    <el-form-item>
      <ykc-button @click="submitForm('ruleForm')">立即创建</ykc-button>
      <ykc-button type="plain">取消</ykc-button>
    </el-form-item>
  </ykc-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          tips: '',
          date: '',
          orgName: '',
          orgName1: '',
          img: '',
          file: '',
          orgType: '',
          label: [],
          dropdown: '',
        },
        rules: {
          name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
          tips: [{ required: true, message: '请输入温馨提示', trigger: 'blur' }],
          date: [{ required: true, message: '请选择日期', trigger: 'change' }],
          orgName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
          orgName1: [{ required: true, message: '请输入机构名称1', trigger: 'blur' }],
          img: [{ required: true, message: '请上传图片', trigger: 'change' }],
          file: [{ required: true, message: '请上传文件', trigger: 'change' }],
          orgType: [{ required: true, message: '请选择机构类型', trigger: 'change' }],
          dropdown: [{ required: true, message: '请选择', trigger: 'change' }],
          label: [{ type: 'array', required: true, message: '请选择标签', trigger: 'change' }],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            console.log(this.ruleForm);
          }
        });
      },
      uploadImg(file, fileList) {
        this.ruleForm.img = fileList && file;
        this.$refs.ruleForm.validateField('img');
      },
      uploadFile(file, fileList) {
        this.ruleForm.file = fileList && file;
        this.$refs.ruleForm.validateField('file');
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      askClick() {
        this.$tips({
          title: '标题1',
          message: '触发点击',
          duration: 2000,
          type: 'info',
          showClose: true,
        });
      },
    },
  };
</script>
<style>
  .el-form {
    width: 450px;
    text-align: left;
  }
</style>

复制代码

# Form Attributes

参数	必填	说明	类型	可选值	默认值
model	是	表单数据对象	object	—	—
rules	否	表单验证规则	object	—	—
labelPosition	否	表单域标签的位置	string	right/left/top	top
label-width	否	表单域标签的宽度	string	—	-
showMessage	否	是否显示校验错误信息	boolean	—	true
disabled	否	是否禁用该表单内的所有组件	boolean	—	false

# Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array / string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array / string)

# Form Events

事件名称	说明	回调参数
validate	任一表单项被校验后触发	被校验的表单项 prop 值，校验是否通过，错误消息

# Form-Item Attributes

参数	必填	说明	类型	可选值	默认值
prop	否	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	—
label	是	标签文本	string	—	—
label-width	否	表单域标签的宽度	string	—	-
required	否	是否必填，如不设置，则会根据校验规则自动生成	boolean	—	false
rules	否	表单验证规则	object	—	—
error	否	表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息	string	—	—
showMessage	否	是否显示校验错误信息	boolean	—	true

# Form-Item Methods

方法名	说明	参数
resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果	—
clearValidate	移除该表单项的校验结果	-

← date-picker message →