InfoTable 信息表格

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

提示

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

基础用法

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

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

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

空格填充

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

编辑模式

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

提示

Layout组件文档参照 Layout(Element)

Attributes

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

cell

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

Events

参数 说明 回调参数
change 表格表单数据发生变化时触发 --