参数总览


props: {
  // 表单描述
  formDesc: {
    type: Object,
    required: true
  },
  // 表单自身自定义属性
  formAttrs: Object,
  // 表单数据, 一个对象即可
  formData: {
    type: Object,
    required: true
  },
  // 行内模式
  inline: {
    type: Boolean,
    default: false
  },
  // 校检规则, 同原 element-ui form 组件的验证
  rules: Object,
  // 自定义表单按钮
  formBtns: Array,
  // 表单按钮大小(同element-ui button组件的 size 属性)
  formBtnSize: String,
  // 是否显示submit按钮
  isShowSubmitBtn: {
    type: Boolean,
    default: true
  },
  // 是否显示back按钮
  isShowBackBtn: {
    type: Boolean,
    default: true
  },
  // 是否显示reset按钮
  isShowResetBtn: {
    type: Boolean,
    default: false
  },
  // 是否显示 cancel 按钮
  isShowCancelBtn: {
    type: Boolean,
    default: false
  },
  // 是否为弹窗
  isDialog: {
    type: Boolean,
    default: false
  },
  // 弹窗变量控制
  visible: {
    type: Boolean,
    default: false
  },
  // 提交按钮文本
  submitBtnText: {
    type: String,
    default: '提交'
  },
  // 返回按钮文本
  backBtnText: {
    type: String,
    default: '返回'
  },
  // 重置按钮
  resetBtnText: {
    type: String,
    default: '重置'
  },
    // 取消按钮文本
  cancelBtnText: {
    type: String,
    default: '取消'
  },
  // 是否显示标签
  isShowLabel: {
    type: Boolean,
    default: true
  },
  // 标签宽度
  labelWidth: {
    type: [Number, String],
    default: 'auto'
  },
  // 提交状态
  isLoading: {
    type: Boolean,
    default: false
  },
  // 是否全局禁用表单
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否全局只读表单
  readonly: {
    type: Boolean,
    default: false
  },
  // 是否显示错误后的 notify
  isShowErrorNotify: {
    type: Boolean,
    default: true
  },
  // 服务器返回的错误信息
  formError: Object,
  // 提交函数 (下面详细讲)
  requestFn: Function,
  // 标签位置, 不填则响应式, 填则固定
  labelPosition: String,
  // 参考原 layout 组件, 不填则响应式, 填则固定
  span: Number,(下个版本将更名为width)
  // 是否响应式
  isResponsive: {
    type: Boolean,
    default: true
  },
  // 表单项顺序数组
  // 数组项为formDesc中的key
  order: {
    type: Array,
    default: () => []
  }
}


参数说明

formDesc

参考:formDesc 表单描述


formAttrs

含义:form组件自身的属性,具体属性设置,请参考element-ui form组件属性


<!-- 指定表单内组件的尺寸为small -->
<ele-form
  :form-attrs="{
    size: 'small'
  }"
/>

image.png


formData

含义:formData是表单的数据

如果是更新时的表单,只需要将数据赋值给 formData  传递过来即可,例如:


data () {
  return {
    formData: {
            // 无数据
    },
    formDesc: {
      title: {
        type: 'input',
        label: '标题'
      }
    }
  }
},


1.png



mounted () {
  setTimeout(() => {
    // 模拟从服务端获取数据
    this.formData = {
      title: '前端基础学习'
    }
    
    // !!! 如果是单个赋值,需要使用 $set 触发响应式
    this.formData.title = '前端基础学习' // ❌
    this.$set(this.formData, 'title', '前端基础学习') // ✅
  }, 1000)
}

2.png


inline

含义:使用inline模式

ele-form分为:inline模式和layout模式,两种方式,具体区别如下:

1.layout模式 labelPosition 和 span 默认响应式, inline模式 无响应式
2.layout模式 form-item layout默认值为24, inline模式默认值为6

image.png

rules

rules 和 ccan'kao参数校检


formBtns

含义:自定义表单的按钮,类型为数组,可以为多个(按钮默认放置在提交按钮之后),例如:


formBtns: [
  {
    text: '下一步',
    type: 'primary',
    attrs: {
        disabled: false
    },
    click: () => {
      console.log('点击下一步了!')
    }
  },
  {
    text: '上一步',
    click: () => {
      console.log('点击上一步了!')
    }
  }
]

image.png

isShowSubmitBtn

含义:是否显示提交按钮,默认是true,即显示提交按钮

当值为 false 时,如图所示:

image.png

isShowBackBtn

含义:是否显示返回按钮,默认值: inline = true OR isDialog = true, 默认值为 false; 其它情况true, 显示. 

当值为 true 时,点击会跳转上个页面:

test.gif


特别:同时会抛出back事件,你可以做相应的其它处理


<ele-form @back="handleGoBack" />


当值为 false 时,如图所示:

image.png


isShowResetBtn

含义:是否显示提交按钮,默认是false,即不显示重置按钮

当值为 true 时,如图所示:

test (1).gif


特别:同时会抛出reset事件,你可以做相应的其它处理


<ele-form @reset="handleRest" />


isShowCancelBtn & isDialog & visible

含义:是否显示取消按钮,默认值根据isDialog,当有取消按钮时,可以通过 visible 进行弹窗控制,例如:


<template>
  <div>
    <el-button @click="isShowDialog = true">显示</el-button>
    <el-dialog title="弹窗测试" :visible.sync="isShowDialog">
      <!-- 通过控制 isShowDialog -->
      <!-- 当点击 取消按钮 时,关闭弹窗 -->
      <ele-form
        v-model="formData"
        :formDesc="formDesc"
        isDialog
        :visible.sync="isShowDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowDialog: false,
      formData: {},
      formDesc: {}
    }
  }
}
</script>

example.gif


PS: 可以进行单独的控制 <ele-form :isShowCancelBtn="false" />


特别:同时会抛出cancel事件,你可以做相应的其它处理


<ele-form @cancel="handleCancel" />


submitBtnText

含义:提交按钮的文字,默认值: 当 inline 为true时, 值为 '查询'; inline 为 false 时,  值为 '提交'.

可以根据需要更改,例如更改为"确定"

image.png

backBtnText

含义:返回按钮文本

可以根据需求更爱,例如更改为 "回到上页"

image.png

resetBtnText

含义:重置按钮文本

可以根据需求更爱,例如更改为 "重置哈哈"

image.png

cancelBtnText

含义:取消按钮的文本,可更改,同上


isShowLabel

含义:是否显示标签,默认为 true ,当为false时不显示标签:

image.png

labelWidth

含义:标签宽度,默认值为 auto

当设置为100时,我们可以看到:

image.png

disabled

含义:当设置为 true 时,所有表单项都被禁用,通常用于查看


<template>
  <div>
    <!-- 这里设置了disabled属性 -->
    <ele-form v-model="formData" :formDesc="formDesc" disabled />
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: 'Mr.right',
        age: 18
      },
      formDesc: {
        name: {
          type: 'input',
          label: '姓名'
        },
        age: {
          type: 'input',
          label: '年龄'
        }
      }
    }
  }
}
</script>

image.png

readonly

用法同disabled,设置全局的readonly,所有的表单项都会应用,但是很不幸的是,element并没有实现所有表单类型的 readonly


isShowErrorNotify

是否显示错误 notify 形式的错误提示,默认为true,如下图:


image.png


当为 false 时,则不进行 notify 通知,但 输入框的提示还是有的


order

对字段排序,因为对象的属性本身排序受浏览器的影响,可能不同浏览器会有不同表现,通过 order 属性可以强制排序:


{
    formDesc: {
        name: { type: "input", label: "姓名" },
    age: { type: "number", label: "年龄" }
    },
  // 这里为了演示,强制将 age 放到前面
    order: ["age", "name"]
}

image.png


isLoading

参考:请求方式相关参数

formError

参考:请求方式相关参数

requestFn

参考:请求方式相关参数

labelPosition

参考:响应式相关参数

span

参考:响应式相关参数

isResponsive

参考:响应式相关参数