Form2 表单组件(苏优)

基础用法

<template>
  <div>
    <h-form2 :formData="form" :formConfig="formConfig" inline :isSearchBoxClass="true">
      <!-- <el-form-item>
        <h-button type="first" style="margin-right:10px">搜索</h-button>
        <h-button type="second" class="default-btn">重置</h-button>
      </el-form-item> -->
    </h-form2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {   //搜索表单字段值
        appDetailsName:"",
        appDetailsStatus: "",
        middleTypeCode:"",
        bigTypeCode:"",
      },
      formConfig: [//搜索表单配置
        {prop: "appDetailsName", itemBox: {width: "220px"}, prepend: {name: "模板名称：", class: "gray" }, type: "el-input",attrs: {placeholder: "请输入模板名称", filterable: true}},
        {prop: "bigTypeCode", itemBox: {width: "150px"}, prepend: {name: "大类：", class: "gray" }, type: "el-select", attrs: {placeholder: "请选择", filterable: true}, selectList: []},
        {prop: "middleTypeCode", itemBox: {width: "150px"}, prepend: {name: "中类：", class: "gray" }, type: "el-select", attrs: {placeholder: "请选择", filterable: true}, selectList: []},
        {prop: "appDetailsStatus", itemBox: {width: "150px"}, prepend: {name: "状态：", class: "gray" }, type: "el-select", attrs: {placeholder: "请选择", filterable: true}, selectList: [
          {label: "全部", value: ""},
          {label: "启用", value: "1"},
          {label: "禁用", value: "2"},
        ]},
      ]
    }
  },
}
</script>

<style lang="scss" scoped>

</style>

显示代码

Form Attributes

参数	说明	类型	可选值	默认值
formData	表单数据对象	object	—	{}
formConfig	表单配置对象	array	—	[]
inline	行内表单模式	boolean	—	false
labelWidth	表单域标签的宽度	string	—	—
labelPosition	表单域标签的位置	string	right/left/top	left
isSearchBoxClass	表单域名是否加外边框	boolean	—	true
requiredStartPosition	必填标识位置	string	star-right/star-left	star-left
disabled	表单是否禁用	boolean	true/false	false

formConfig Attributes

参数	说明	类型	可选值	默认值
prop	默认表单域model绑定字段	object	—	{}
itemBox	表单配置对象	object	—	[]
prepend	设置表单左侧信息	boolean	—	false
type	默认组件名	string	—	—
attrs	默认组件属性设置	object	right/left/top	—
listeners	默认组件绑定事件	object	—	—
isShowTooltip	是否启用表单项内容toolTip效果	boolean	true/false	false

formConfig-prepend Attributes（表单域左侧配置）

参数	说明	类型	可选值	默认值
type	默认组件名	string	—	—
prop	默认表单域model绑定字段	object	—	{}
attrs	组件属性设置	object	right/left/top	—
listeners	组件绑定事件	object	—	—
name	标题名称(type未配置生效)	object	—	{}

Form Slot

name	说明
—	Form 自定义的内容

Events

方法名	说明	参数