InfoTable 信息表格

组件是使用Row组件和Col组件生成的类表格组件。用于展示label-value格式的信息。

提示

因为使用了Row的flex模式,请注意浏览器兼容性。

基础用法

只需要cells就可以渲染出表格,传入data即可显示数据。

响应式单元格和设置固定值

响应式是通过Col组件实现的,具体见文档

空格填充

当单元格没有有效值(最终值为假值但不包括数字0)用于填充时,组件会默认使用'--'填充。也可以通过函数自行决定如何填充。

作用域插槽

单元格设置slotName就可以通过指导名称的插槽自定义内容,插槽会传入数据data。

单元格属性设置

可以设置单元格为响应式属性

自带特定模式单元格

编辑模式

信息表格可以开启编辑模式,因为编辑组件使用了FormFieldItem组件,故编辑模式的表格必须放置于Form组件中。

提示

Layout组件文档参照

Attributes

参数类型说明可选值默认值
cellsobject[]表格单元格配置对象数组。具体结构见cell----
dataobject用于表格显示的数据对象。----
set-empty-cellboolean /
Function(data, allData)
是否需要将空单元格设置成'--',也可以传入函数来自己决定怎么处理空单元格。----
is-editboolean表格是否处于编辑状态。----
value/v-modelobject编辑状态表格表单的绑定值。----
extra-dataobject额外的数据对象。会合并data生成完整的数据对象。适用于存放不需要参数编辑的数据。----

cell

参数类型说明可选值默认值
hideboolean/function单元格是否隐藏(不渲染)。----
propsobject/functionCol组绑定参数对象或返回对象的函数。----
propstring/number单元格显示内容在data中对应的键名,或表单项绑定值在value中对应的键名。----
keystring/number组件的key,缺省时使用prop属性。如果prop缺省时会使用数组索引,为了性能prop缺省时请设置key----
labelstring/boolean单元格label区域显示内容,传入false可不显示label----
labelstring单元格label区域显示内容,传入空值可不显示label----
iconstring单元格label区域图标,在文字左侧。----
formatterFunction(value, allData)单元格内容区域显示内容的格式化函数。----
labelComponentstring(ComponentName)
/Component
单元格label自定义组件。组件会传入cell对象和allData数据,下同。----
valueComponentstring(ComponentName)
/Component
单元格内容区域自定义组件。----
canEditboolean当前单元格是否可编辑。----
fieldPropsobject单元格表单项组件的参数绑定对象,具体见FormFieldItem。默认会合入单元格的prop作为表单项组件的prop属性,可覆盖。----

Events

参数说明回调参数
change表格表单数据发生变化时触发--
Last Updated:
Contributors: wxhccche, wxhccc