# groupTable 分组表格

# groupTable 概述

表通过对data进行嵌套分组，显示分组表格。
不支持可编辑类型。

# groupTable 代码示例

# 单选分组

最简单的用法，展示基本的编辑类型。

# 多选分组

进行多项选择。

# 父子行多选不关联

通过开启 isGroupSeparated，父行和子行的选择情况将不再关联。

# 自定义分组标题行

自定义分组标题行。

# titleRender实现分组单列全选反选功能

titleRender实现分组单列全选反选功能。

# groupTable API

# groupTable props

属性	说明	类型	默认值
data	显示的结构化数据(分组表格请使用嵌套，并给出title属性)	Array	[]
columns	表格列的配置描述，具体项见后文	Array	[]
stripe	是否显示间隔斑马纹	Boolean	false
border	是否显示纵向边框	Boolean	true
show-header	是否显示表头	Boolean	true
width	表格宽度，单位 px	Number \| String	自动
height	表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头	Number \| String	-
disabled-hover	禁用鼠标悬停时的高亮	Boolean	false
rowSelect	多选时是否支持行选中,(仅在type为selection即多选下使用)	Boolean	false
highlight-row	是否支持高亮选中的行，即单选	Boolean	false
size	表格尺寸 (只修改表头尺寸)，可选值为 large、small、default 或者不填	String	-
no-data-text	数据为空时显示的提示内容	String	暂无数据
loading	表格是否加载中	Boolean	false
cloneData	通过this.$refs.xxx.cloneData获取table内改变后的数据	--	--
multiLevel	提供groupTable组件多级表头，不支持冻结列,其配置项目，具体见后文（此属性只在1.0.24或以上版本有效）	Array	null
disableExpand	控制父节点是否点击进行展开/收缩（v1.0.35）	Boolean	false
childHighlightRow	分组组件组内条目单选.注意不能和 `highlight-row` 同时开启（v1.0.36）	Boolean	false
titleRender	分组标题自定义渲染（v1.0.37）使用 Vue 的 Render 函数。传入三个参数，第一个是 h，第二个为当前组标题，第三个为分组的索引值(第三个参数为v1.074新增)	Function	--
cancelSelection	单选选中项可取消选中（v1.0.44）	Boolean	false
canDrag	是否可以拖动列宽（v1.0.47）	Boolean	false
canMove	表格是否可拖动,改变表格列顺序（v1.0.47）	Boolean	false
isGroupSeparated	多选时父行与子行是否关联。开启 `isGroupSeparated` 后，选中父行不再自动全选子行；手动选中全部子行后不再自动选中父行(不联动时点击表头全选依然可以全部选中)（v1.0.50）	Boolean	false
preventRightClick	阻止子节点鼠标右键事件（v1.16.0）	Boolean	false

# groupTable events

事件名	说明	返回值
on-current-change	开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发	`currentRow`：当前高亮行的数据 `oldCurrentRow`：上一次高亮的数据 `curIndex`:包括k(当前父行索引)，m(当前子行索引),key(点击单元格所在列关键字)(只在v.1.26及以上有效)
on-select	在多选模式下有效，选中某一项时触发	`selection`：已选项数据 `row`：刚选择的项数据
on-select-cancel	在多选模式下有效，取消选中某一项时触发	`selection`：已选项数据 `row`：取消选择的项数据
on-select-all	在多选模式下有效，点击全选时触发	`selection`：已选项数据
on-selection-change	在多选模式下有效，只要选中项发生变化时就会触发	`selection`：已选项数据
on-row-click	单击某一行时触发	`currentRow`：当前行的数据 `status`：当前行选中状态
on-row-dblclick	双击某一行时触发	`currentRow`：当前高亮行的数据 `curIndex`:包括k(当前父行索引)，m(当前子行索引),key(点击单元格所在列关键字)(v1.0.30)
on-scroll	表格内纵向滚动条滚动时触发	返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部）
on-child-change	childHighlightRow模式下点击某一项触发（v1.0.36）	返回项目中所有已经选择项目，1.0.44版本及以上每个选中项还将包括k(当前父行索引)，m(前子行索引)
on-drag	拖动表头是触发(v1.0.47)	返回当前拖动表头的宽度，和返回当前拖动表头key
on-move	拖动表头列排序时触发(v1.0.47)	返回当前拖动表头原本的index和拖动后的index
on-expand	点击表头展开、折叠时触发(v1.0.48)	返回当前操作的分组表格数据data与展开状态status
on-right-click	子节点行右点击事件（需开启preventRightClick属性）	`event`：Event对象 `row`：当前选中行的数据 `索引对象`：包括k(当前父行索引)，m(当前子行索引)(v1.16.0)

# groupTable slot

名称	说明
loading	加载中

# groupTable column

列描述数据对象，是 columns 中的一项

属性	说明	类型	默认值
type	列类型，可选值为 index, selection, expand(v1.0.29), radio(v1.0.37 该模式下默认开启 highlight-row)	String	-
title	列头显示文字	String	#
key	对应列内容的字段名（key关键字不与样式名重叠）	String	-
width	列宽	Number	-
align	对齐方式，可选值为 `left` 左对齐、 `right` 右对齐和 `center` 居中对齐	String	left
hiddenCol	是否隐藏当前列	Boolean	false
render	自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据（columns内列数据），当前行索引。 (如果需求替代当前单元格，请添加样式.h-editgird .h-editgird-cell-with-render .dbClass{display:none;})	Function	-
hiddenOther	是否隐藏单元格内原有值(v1.0.26其以上版本支持)	Boolean	false
renderHeader	自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 `column` 和 `index`，分别为当前列数据（columns内列数据）和当前列索引。	Function	-

# multiLevel (v1.0.24及其以上版本支持)

列描述数据对象，是 multiLevel 中的一项

属性	说明	类型	默认值
title	多级显示文字	String	#
cols	当前表头所占跨列数	Number	1
rows	当前表头所占跨行数，被跨行单元格右移动（v1.0.24）	Number	1
align	对齐方式，可选值为 `left` 左对齐、 `right` 右对齐和 `center` 居中对齐	String	left
className	表头单元格样式名	String	-
hiddenCol	是否隐藏当前表头列	Boolean	false