SuitForm 表单

说明

SuitForm是数据驱动式表单,基于el-form,el-form-item进行封装,实现了通过快速的配置,将表单页面生成。

基本示例

基本使用

<template>
    <div>
      <suit-form
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        formData: [
          {
            tag:'el-input',
            prop:'name',
            label:'姓名',
            placeholder:"请选择姓名"
         },
         {
            tag:'suit-dict-select',
            prop:'sex',
            label:'性别',
            br:true,
            code:'sex_type',
            placeholder:"请选择性别"
         },
         {
            tag:'el-input',
            type:'textarea',
            prop:'remark',
            label:'介绍',
            span:24,
            placeholder:"请输入介绍"
         },
        ]
      }
    }
  }
</script>

Expand Copy Copy

换行

<template>
    <div>
      <suit-form
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        formData: [
          {
            tag:'el-input',
            prop:'name',
            label:'姓名',
            placeholder:"请选择姓名",
            br:true,
         },
         {
            tag:'suit-dict-select',
            prop:'sex',
            label:'性别',
            code:'sex_type',
            placeholder:"请选择性别"
         },
         {
            tag:'el-input',
            type:'textarea',
            prop:'remark',
            label:'介绍',
            span:12,
            placeholder:"请输入介绍"
         },
        ]
      }
    }
  }
</script>

Expand Copy Copy

事件

<template>
    <div>
      <suit-form
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        formData: [
         {
            tag:'suit-dict-select',
            prop:'sex',
            label:'性别',
            code:'sex_type',
            placeholder:"请选择性别",
            onChange:(e)=>{
                this.$message.success(e)
            }
         }
        ]
      }
    }
  }
</script>

Expand Copy Copy

验证

校验

<template>
    <div class="flex-space-between">
      <suit-form
         ref="formRef"
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
      <div>
        <suit-button type="primary" @click="valid">校验</suit-button>
      </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        formData: [
         {
            tag:'suit-dict-select',
            prop:'sex',
            label:'性别',
            width:'360px',
            code:'sex_type',
            placeholder:"请选择性别",
            clearable:true,
            rules:[
                {required:true,message:'性别不能为空'}
            ]
         }
        ]
      }
    },
    methods:{
        valid(){
           this.$refs['formRef'].validate(valid=>{
              if(valid){
                 this.$message.success('验证通过')
              }else{
                 this.$message.error('验证失败')
              }
           })
        }
    }
  }
</script>

Expand Copy Copy

过滤器

过滤器分为三种：filter,viewFilter,editFitler,三者重复写只有一个会生效。

<template>
      <suit-form
         ref="formRef"
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {sex:'female',date:1709535794226,names:['张三','李四']},
        formData: [
         {
            tag:'suit-dict-select',
            prop:'sex',
            label:'性别',
            isView:true,
            viewFilter:'dict|sex_type'
         },
          {
            tag:'el-input',
            prop:'date',
            label:'日期',
            isView:true,
            viewFilter:'time|{y}-{m}'
         },
         {
            tag:'el-input',
            prop:'names',
            label:'操作人员',
            isView:true,
            viewFilter:'names'
         },
         {
            tag:'el-input',
            prop:'names',
            label:'自定义',
            isView:true,
            viewFilter(h,config,isView){
              return 'viewFilter'
            }
         }
        ]
      }
    }
  }
</script>

Expand Copy Copy

自定义渲染

<template>
      <suit-form
        :is-view="isView"
         ref="formRef"
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
</template>
<script>
  export default {
    data() {
      return {
        isView:false,
        form: {sex:'female'},
        formData: [
         {
            tag:'suit-dict-select',
            prop:'sex',
            isView:true,
            labelRender:(h,isView)=>{
                return <div style={{color:'green'}}>性别</div>
            },
            viewFilter:"dict|sex_type",
            viewRender(h,isView,data){
               return <span>{data}</span>
            },
            editRender: (h,isView)=>{
                return <suit-dict-select  
                        code="sex_type" 
                        value={this.form['sex']} 
                        onInput={(e)=>{
                            this.$set(this.form,'sex',e)
                        }}>
                </suit-dict-select>
            }
         },
          {
            tag:'suit-dict-select',
            prop:'sex',
            labelRender:(h,isView)=>{
                return <div style={{color:'green'}}>性别</div>
            },
            viewRender(h,isView,data){
               return <span>{data}</span>
            },
            editRender: (h,isView)=>{
                return <suit-dict-select  
                        code="sex_type" 
                        value={this.form['sex']} 
                        onInput={(e)=>{
                            this.$set(this.form,'sex',e)
                        }}>
                </suit-dict-select>
            }
         }
        ]
      }
    },
    methods:{
        valid(){
           this.$refs['formRef'].validate(valid=>{
              if(valid){
                 this.$message.success('验证通过')
              }else{
                 this.$message.error('验证失败')
              }
           })
        }
    }
  }
</script>

Expand Copy Copy

节点更新

<template>
    <div>
      <suit-form
         :model='form'
         :span='12'
         :data="formData"
      ></suit-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        formData: [
         {
            tag:'suit-dict-select',
            prop:'sex',
            label:'性别',
            code:'sex_type',
            clearable:true,
            placeholder:"请选择性别",
            onChange:(e,{updateFormItem})=>{
               // 当为空值,清空文本框中的内容
               if(!e){
                 updateFormItem('manRemark',{
                    value:null
                  })
                 updateFormItem('felmanRemark',{
                    value:null
                  })
                return 
               }
             
               if(e === 'male'){
                  updateFormItem('manRemark',{
                    show:true,
                    value:"我叫小明，喜欢打篮球"
                  })
                   updateFormItem('felmanRemark',{
                    show:false
                  })
               }else{
                 updateFormItem('manRemark',{
                    show:false
                  })
                 updateFormItem('felmanRemark',{
                    show:true,
                    value:"我叫小红，爱画画"
                  })
               }
            }
         },
         {
            tag:'el-input',
            type:'textarea',
            prop:'manRemark',
            label:'男生介绍',
            span:24,
            placeholder:"请输入男生介绍"
         },
         {
            tag:'el-input',
            type:'textarea',
            prop:'felmanRemark',
            label:'女生介绍',
            span:24,
            placeholder:"请输入女生介绍"
         },
        ]
      }
    }
  }
</script>

Expand Copy Copy

参数

Form

参数	说明	类型	可选值	默认值
data	表单配置数据	array	-	[]
model	表单绑定的数据	object	-	{}
span	栅格系统，一行有24列	number	-	12
labelWidth	表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。	string	-	100px
size	用于控制该表单内组件的尺寸	string	meduim、small、mini	meduim
rules	表单验证规则	object	-	-
labelSuffix	表单域标签的后缀	string	-	-
hideRequiredAsterisk	是否隐藏必填字段的标签旁边的红色星号	boolean	-	false
showMessage	是否显示校验错误信息	boolean	-	true
inlineMessage	是否以行内形式展示校验信息	boolean	-	false
statusIcon	是否在输入框中显示校验结果反馈图标	boolean	-	false
validateOnRuleChange	是否在 rules 属性改变后立即触发一次验证	boolean	-	true
disabled	是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效	boolean	-	false
isView	是否为查看状态	boolean	-	false

方法

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props:array | string)
updateFormItem	更新节点信息，通常的使用场景是当一个表单项状态发生变化时，触发另一个表单项状态的变化	-

data配置

参数	说明	类型	可选值	默认值
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	—
span	栅格系统，一行有24列	number	-	12
label	标签文本	string	-	-
br	是否换行	boolean	-	false
comConfig	组件配置，当出现组件属性中出现 prop,span,label,之类的关键字属性，可以放在comConfig中，但是一般情况下组件设计时不应该出现这些关键字	object	-	-
rules	表单验证规则	object	-	-
error	表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息	string	-	-
show-message	是否显示校验错误信息	boolean	-	true
inline-message	以行内形式展示校验信息	boolean	-	false
labelWidth	表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。	string	-	100px
width	表单组件宽度，默认不进行设置	string	-	-
filter	过滤器	function|string	-	-
viewFilter	查看状态下的过滤器	function|string	-	-
editFilter	编辑状态下的过滤器	function|string	-	-
labelRender	标签的自定义渲染，优先级高于label	function	-	-
viewLabelRender	在查看状态时，标签的自定义渲染，优先级高于 labelRender	function	-	-
editLabelRender	在编辑状态时，标签的自定义渲染，优先级高于 labelRender	function	-	-
render	进行表单项的渲染，优先级高级tag	function	-	-
viewRender	在查看状态时，进行表单项的渲染，优先级高级tag	function	-	-
editRender	在编辑状态时，进行表单项的渲染，优先级高级tag	function	-	-
onInput	事件	function	-	-
事件	事件,需要说明的是，当配置项是驼峰方式存在的前两个字母为on的,程序都是会判断为事件，事件中会被传入当前父级上下文	function	-	-
其它属性	使用组件的属性可直接写到配置项中	-	-