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 | 表格表单数据发生变化时触发 | -- |