Skip to content

通用配置

提示

文中的一些类型来自 基础 Ts 类型 章节,建议先阅读。

高级组件中除了布局组件Layout和多选卡片CheckCardGroup 之外的组件通用配置。

配置的核心字段是valueType,渲染的 key 是prop(所以需要保证唯一)。

columns 配置

TS 类型 PlusColumn

名称说明类型默认值是否必须
prop不可重复表格对应列内容的字段名 ;在 form/search 中是 el-input 等所有表单项的双向绑定的值;在 descriptions 是 el-descriptions-item 的值对应的字段; 支持x.y.z形式的多(无限)级数据形式; 表单中v0.1.7版本开始支持多级string
label表格表头显示的标题 ;在 form 中是 el-form-item 的 label;在 descriptions 是 el-descriptions-item 的 label;v0.1.0 版本开始支持计算属性,可用于实现国际化。string|ComputedRef<string>(v0.1.0新增)否 (小于v0.0.10是必须 )
width表格列宽string| number
minWidth表格列最小宽string| number
valueType值的类型string(TableValueType / FormItemValueType )
editable当值为true时,表格中整列显示的是valueType取值对应的可编辑的表单,valueType取值为 FormItemValueTypebooleanfalse
headerFilter deprecated v0.0.3表格列设置中禁止表格当前列的表头过滤,已废弃,请使用disabledHeaderFilter代替booleanfalse
disabledHeaderFilter v0.0.3表格列设置中禁止表格当前列的表头过滤booleanfalse
tableColumnProps表格 column,支持所有el-table-column 属性 (不包含 label,prop,width,minWidth,formatter),支持事件透传object ElTableColumnProps
preview表格列图片预览,仅当 valueType 等于 img 时生效; el-image 图片预览 默认开启 给 false 关闭boolean
linkText表格列 link 文字,valueType 等于 link 时生效;有值时则表格的整列都会显示这个值,默认取得是 prop 对应的表格数据string
descriptionsItemProps描述行,el-descriptions-item 的 props ,支持事件透传object DescriptionsItemProps
renderDescriptionsItemv0.0.2自定义PlusDescriptions 单行显示内容,在PlusDescriptions 组件中优先级最高,高于 render,renderHTMLfunction
renderDescriptionsLabelv0.0.2自定义PlusDescriptions 单行 label 显示内容function
optionsel-select、el-radio-group、el-checkbox-group、el-cascader 和 PlusRadio 的选项 ,支持数组,computed,函数,和 Promisearray|function|promiseOptionsType
customGetStatus自定义 options 的显示逻辑,需要返回一个OptionsRow对象。function
tooltip展示一个 icon,hover 时展示一些提示信息string | ( object ElTooltipProps )
render自定义渲染表格/PlusDescriptions 单行显示内容,render的优先级最高,高于renderHTMLvalueTypefunction
renderHTML自定义渲染表格/PlusDescriptions 单行显示内容 需要返回一个 html 字符串,renderHTML的优先级低于render,高于 valueType谨慎使用,确保 HTML 字符串可信。function
renderHeader自定义渲染表格表头显示内容function
formatterv0.1.13格式化表格/PlusDescriptions 显示内容function
formProps表格中传递给 PlusForm 的配置,支持所有 PlusForm 的 props,表格编辑状态有效。支持事件透传objectPlusFormProps
formItemProps传递给 el-form-item 的配置,支持所有 el-form-item 的 props。值支持对象 object,computed,函数和 Promise。支持事件透传object|function|promisePropsItemType
fieldProps传递给具体表单项和表格显示的配置,如 el-input,el-select,el-tag,el-image 的 props。值支持对象 object,computed,函数和 Promise。支持事件透传object|function|promise PropsItemType
fieldSlots表单(表格)单个项目的插槽,支持类似 el-input,el-select, el-image ,el-link 等所有表单(表格)单项的插槽object
fieldChildrenSlotv0.0.7自定义表单每一项子项的插槽,例如自定义 el-checkbox-group 下 el-checkbox 的内容function
renderField自定义渲染 el-form-item 下的 field-item 组件,自定义渲染表单数据双向绑定的核心方法是调用回调函数 onChange 把值传给表单function
renderLabel自定义渲染 el-form-item 的 label 显示内容function
hasLabel表单中单个项目是否需要 label,默认 undefined,优先级高于表单的整体的 hasLabelboolean undefined
renderExtra自定义渲染 el-form-item 下一行额外的内容function
colProps el-col 的 props。支持事件透传object ColProps
order v0.1.4PlusSearch 查询表单中的权重,权重大排序靠前,在 PlusPage 组件中非常有用number 0
hideInDescriptionsPlusDescriptions 组件中 隐藏boolean false
hideInFormPlusForm 组件中 隐藏boolean false
hideInTablePlusPage 组件中 隐藏boolean false
hideInSearchPlusSearch 组件中 隐藏boolean false

valueType 可选的表单值

valueType 表单值对应 element-plus 的表单组件对应 plus-pro-components 的组件对应的表格显示
autocompleteel-autocomplete文本显示
cascaderel-cascader文本显示
checkboxel-checkbox-group,el-checkbox 显示值对应optionslabel
color-pickerel-color-picker文本显示
date-pickerel-date-picker文本显示 默认格式化成 YYYY-MM-DD HH:mm:ssv0.1.6 新增 如果 fieldProps 中有format(优先)或valueFormat,则以formatvalueFormat的格式显示时间
input-numberel-input-number文本显示
radioel-radio-radio,el-radio显示值对应optionslabel
rateel-rate文本显示
selectel-select显示值对应optionslabel
sliderel-slider文本显示
switchel-switch文本显示
time-pickerel-time-picker文本显示
time-selectel-time-select文本显示
textareael-input (type=textarea)文本显示
input(默认值)el-input 表单默认值文本显示
textel-text 文本显示
transfer v0.1.0el-transfer 穿梭框文本显示
tree-select v0.1.1el-tree-select 树形选择文本显示
plus-radio plus-radio显示值对应optionslabel
plus-date-pickerplus-date-picker文本显示
plus-input-tagplus-input-tag文本显示

valueType 可选的显示值

valueType 表格值对应 element-plus/原生的显示组件说明对应的编辑状态组件
undefined (默认值)span显示默认值,显示文本el-input
imgel-image显示图片,自带预览,可使用配置项preview禁止el-input
linkel-link显示 el-link ,配合配置项fieldPropslinkText 使用el-input
moneyspan显示金钱el-input
tagel-tag显示 el-tag ,配合配置项fieldProps 使用el-input
progressel-progress显示 el-progress ,配合配置项fieldProps 使用el-input
copyspan文本后面有可以复制按钮el-input
codespan显示代码el-input
textspan显示文本el-text
avatarv0.1.0el-avatar显示 头像el-input
dividerv0.1.0el-divider显示 dividerel-divider