PlusProComponents

主题

FormItem 表单单项组件 ​

PlusForm 组件的每一项。

注意

表单v-model绑定的值尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题。 参考 reactive 的局限性

基础用法 ​

设置 valueType 控制表单的类型。

异步（动态）数据用法 ​

PlusColumn 配置中的 options 支持数组， computed，函数和 Promise。

自定义表单项 (插槽) ​

注意

插槽 的优先级低于 renderField，高于 valueType。

PlusFormItem 组件会自动根据配置项的 prop 生成对应的插槽，例如下面的配置项，则会自动生成两个名称叫做 [ plus-field-name ]和 [ plus-field-status] 的两个插槽，插槽的生成规则就是 固定 key 值 [ plus-field- ] 然后加上 配置项的 prop。

html
<!--   自动生成对应的插槽 'plus-field-name' -->
<PlusFormItem label="自定义" prop="name">
  <template #plus-field-name>
    <el-input placeholder="自定义输入框插槽" />
  </template>
</PlusFormItem>

<!-- 自动生成对应的插槽 'plus-field-status' -->
<PlusFormItem label="自定义" prop="name">
  <template #plus-field-status>
    <el-input placeholder="自定义输入框插槽" />
  </template>
</PlusFormItem>

自定义表单项 (renderField) ​

注意

renderField 的优先级高于插槽。

自定义表单项的核心方法是定义 renderField方法， renderField 方法需要调用 vue 的渲染函数 h 返回一个 VNode

提示

renderField 返回的值的props 和配置项的fieldProps会同时生效，renderField 返回的值的props优先级高于 fieldProps.

自定义表单项 (jsx/tsx) ​

注意

jsx/tsx 的使用需要将 vue 单文件组件的script的属性 lang设置为jsx或者tsx，jsx 中值使用单花括号{}绑定。

html
<script lang="tsx" setup></script>

jsx/tsx 的支持本质是jsx/tsx解析出来是VNode, 使用 renderField 函数自定义表单项。

自定义表单 label (插槽) ​

注意

插槽 的优先级低于 renderLabel，高于 label。

PlusFormItem 组件会自动根据配置项的 prop 生成对应的插槽，例如下面的配置项，则会自动生成两个名称叫做 [ plus-label-name ]和 [ plus-label-status] 的两个插槽，插槽的生成规则就是 固定 key 值 [ plus-label- ] 然后加上 配置项的 prop。

html
<!--   自动生成对应的插槽 'plus-label-name' -->
<PlusFormItem label="自定义" prop="name">
  <template #plus-label-name>
    <el-input placeholder="自定义输入框插槽" />
  </template>
</PlusFormItem>

<!-- 自动生成对应的插槽 'plus-label-status' -->
<PlusFormItem label="自定义" prop="name">
  <template #plus-label-status>
    <el-input placeholder="自定义输入框插槽" />
  </template>
</PlusFormItem>

自定义表单 label (renderLabel) ​

注意

renderLabel 的优先级高于插槽。

自定义表单项的核心方法是定义 renderLabel方法， renderLabel 方法需要调用 vue 的渲染函数 h 返回一个 VNode

自定义表单 label (jsx/tsx) ​

注意

jsx/tsx 的使用需要将 vue 单文件组件的script的属性 lang设置为jsx或者tsx，jsx 中值使用单花括号{}绑定。

html
<script lang="tsx" setup></script>

jsx/tsx 的支持本质是jsx/tsx解析出来是VNode, 使用 renderField 函数自定义表单项。

所有支持的类型 ​

FormItem API ​

FormItem Attributes ​

名称说明类型默认值是否必须
model-value / v-model表单绑定值 （尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题）objectFieldValues否
labelel-form-item 的 labelstring是
propel-input 等所有表单项的双向绑定的值；string是
valueType值的类型stringFormItemValueType否
optionsel-select，el-radio-group，el-checkbox-group 选项 ，支持数组，函数，和 Promisearray/function/promiseOptionsType否
tooltip展示一个 icon，hover 时展示一些提示信息string / (objectElTooltipProps )否
renderField自定义渲染 el-form-item 下的 field-item 组件，自定义渲染同步表单的值的核心方法是调用 onChange 回调把值传给表单function 否
formItemProps传递给 el-form-item 的配置，支持所有 el-form-item 的 props。值支持对象 object，computed，函数和 Promise。object/function/promisePropsItemType否
fieldProps传递给具体表单项和表格显示的配置，如 el-input，el-select 的 props。 值支持对象 object，computed，函数和 Promise。object/function/promisePropsItemType否
renderLabel自定义渲染 el-form-item 下 label 行显示内容function 否

FormItem Slots ​

插槽名说明作用域插槽参数
plus-field-*自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽{prop,label,fieldProps,valueType,column}
plus-label-*自定义表单项 label，组件会自动根据配置项的 prop 生成对应的插槽{prop,label,fieldProps,valueType,column}

Exposes ​

名称说明类型
formItemInstanceel-form-tem 实例object
fieldInstance具体的表单单项实例 如 el-inputobject