参数总览


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
  },
  // 服务器返回的错误信息
  formError: Object,
  // 提交函数 (下面详细讲)
  requestFn: Function,
  // 标签位置, 不填则响应式, 填则固定
  labelPosition: String,
  // 参考原 layout 组件, 不填则响应式, 填则固定
  span: Number,(下个版本将更名为width)
  // 是否响应式
  isResponsive: {
    type: Boolean,
    default: true
  }
}


参数说明

formDesc

参考:formDesc 表单描述


formAttrs

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


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

image.png


formData

含义:formData是表单的数据

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


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


1.png



mounted () {
  setTimeout(() => {
    // 模拟从服务端获取数据
    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',
    click () {
      console.log('点击下一步了!')
    }
  },
  {
    text: '上一步',
    click () {
      console.log('点击上一步了!')
    }
  }
]

image.png

isShowSubmitBtn

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

当值为 false 时,如图所示:

image.png

isShowBackBtn

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

当值为 false 时,如图所示:

image.png

isShowResetBtn

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

当值为 true 时,如图所示:

image.png

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" />


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

isLoading

参考:请求方式相关参数

formError

参考:请求方式相关参数

requestFn

参考:请求方式相关参数

labelPosition

参考:响应式相关参数

span

参考:响应式相关参数

isResponsive

参考:响应式相关参数