simpleGroupChildTable 表格

simpleGroupChildTable 概述

主要用于展示具有主子表关系的结构化数据和有层级关系的数据，不支持编辑

TIP

注意：该组件是高定制化组件，用于展示具有主子表关系的结构化数据，只做数据展示使用；本表格仅支持基本场景的表格功能（详见官网文档），复杂业务场景及影响性能的场景不支持。使用前请做好充足的调研。

simpleGroupChildTable 代码示例

基础用法

simpleGroupChildTable的最基本的用法。

simpleGroupChildTable API

simpleGroupChildTable props

属性	说明	类型	默认值
data	显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。	Array	[]
columns	表格列的配置描述，具体项见后文	Array	[]
childColumns	子表格列的配置描述	Array	[]
width	表格宽度，单位 px	Number | String	自动
height	表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头	Number | String	-
border	是否显示纵向边框	Boolean	false
highlight-row	是否支持选中的行，即单选	Boolean	false
row-class-name	行的 className 的回调方法，传入参数： row：当前行数据 index：当前行的索引	Function	-
no-data-text	数据为空时显示的提示内容	String	暂无数据
rowSelect	多选时是否支持行选中,(仅在type为selection即多选下使用)	Boolean	false
loading	表格是否加载中	Boolean	false
showTitle	开启后，鼠标悬浮将展示全部文本内容（只在开启 ellipsis 后有效）	Boolean	false
itemHeight	每列项的高度	Number	40

simpleGroupChildTable events

事件名	说明	返回值
on-expand	展开或收起某一行时触发	返回当前行数据row和当前行状态status
on-select	在多选模式下有效，选中某一项时触发（rowSelect为true或者点击多选框时生效）	返回已选项数据selection和刚选择的项数据的row
on-select-cancel	在多选模式下有效，取消某一项时触发	返回已取消数据selection和刚取消的项数据的row
on-selection-change	行选中状态发生改变时触发	返回已选项数据selection和已选项数据索引集合selectInx
on-select-all	全选或取消全选时触发	返回已选项数据selection
on-current-change	开启 highlight-row 后有效，选中一行时触发	返回当前行的数据和上一次选择的数据
on-row-click	单击某一行时触发（不支持rowSelect属性）	当前行的数据和index
on-row-dblclick	双击某一行时触发（不支持rowSelect属性）	当前行的数据
on-scroll	表格内纵向滚动条滚动时触发;横向滚动不触发 on-scroll	返回第一个参数是当前纵向滚动条距离底部的距离（为 0 时表示滚动条已经滚动到最底部）；第二个参数为滚动方向（"x"代表水平滚动，"y"代表垂直滚动）

simpleGroupChildTable slot

名称	说明
loading	加载中
nodata	暂无数据

simpleGroupChildTable column

属性	说明	类型	默认值
type	列类型，可选值为 index、selection	String	-
title	列头显示文字	String	#
key	对应列内容的字段名（只允许字母、数字或字母数字与下划线、短横线的组合）	String	-
width	列宽	Number	-
minWidth	表格最小宽度，单位 px	Number | String	--
align	对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐	String	left
ellipsis	开启后，文本将不换行，超出部分显示为省略号	Boolean	false