InfoTable 信息表格
组件是使用Row
组件和Col
组件生成的类表格组件。用于展示label-value格式的信息。
提示
因为使用了Row
的flex模式,请注意浏览器兼容性。
基础用法
只需要cells
就可以渲染出表格,传入data
即可显示数据。
响应式单元格和设置固定值
响应式是通过Col
组件实现的,具体见文档
空格填充
当单元格没有有效值(最终值为假值但不包括数字0)用于填充时,组件会默认使用'--'填充。也可以通过函数自行决定如何填充。
作用域插槽
单元格设置slotName
就可以通过指导名称的插槽自定义内容,插槽会传入数据data。
单元格属性设置
可以设置单元格为响应式属性
自带特定模式单元格
编辑模式
信息表格可以开启编辑模式,因为编辑组件使用了FormFieldItem组件,故编辑模式的表格必须放置于Form
组件中。
提示
Layout组件文档参照
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 | 表格表单数据发生变化时触发 | -- |