# simpleGroupsTable 两级树表格

# simpleGroupsTable 概述

主要用于展示两级树表格使用，采用虚拟滚动实现高性能，主要用于展示大量结构化数据。不支持可编辑类型。

TIP

注意：该组件是高定制化组件，只支持两级树表格；本表格仅支持基本场景的表格功能（详见官网文档），复杂业务场景及影响性能的场景不支持。使用前请做好充足的调研。

# simpleGroupsTable 代码示例

# 基础用法

simpleGroupsTable最简单的用法。

# 自定义列模板

通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。 render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据（columns 内列数据），当前行索引。

# 控制表格焦点

通过鼠标事件来支持焦点切入或移出，焦点切入当前表格后使用 ↑↓ 方向键可操作表格当前高亮聚焦行。

highlight-row: 支持高亮选中的行，即单选。

同时可以使用以下方法监听过程：

on-current-change:开启 highlight-row 后有效，当表格的当前行发生变化时会触发。

on-row-click:单击某一行时触发。

on-row-dblclick:双击某一行时触发。

# 多选

可进行多项选择。

rowSelect:多选模式下可使用行选中来选择，按住 shift 可一键连续选择。

同时可以使用以下方法监听过程：

on-select-all:在多选模式下有效，点击全选时触发。

on-selection-change:在多选模式下有效，只要选中项发生变化时就会触发。

# simpleGroupsTable API

# simpleGroupsTable props

属性	说明	类型	默认值
data	显示的结构化数据（主子表请使用嵌套）	Array	[]
columns	表格列的配置描述，具体项见后文	Array	[]
stripe	是否显示间隔斑马纹	Boolean	false
border	是否显示纵向边框	Boolean	true
width	表格宽度，单位 px	Number \| String	自动
height	表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头	Number \| String	400
disabled-hover	禁用鼠标悬停时的高亮	Boolean	false
rowSelect	多选时是否支持行选中（仅在type为selection即多选下使用）	Boolean	false
highlight-row	是否支持高亮选中的行，即单选	Boolean	false
row-class-name	行的 className 的回调方法，传入参数： `row`：当前行数据 `index`：当前行的索引	Function	-
no-data-text	数据为空时显示的提示内容	String	暂无数据
loading	表格是否加载中	Boolean	false
itemHeight	每列项高度（自己改了样式时配置，必须保持表格每项高度一致）	Number	40

# simpleGroupsTable events

事件名	说明	返回值
on-current-change	开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发	`currentRow`：当前高亮行的数据 `oldCurrentRow`：上一次高亮的数据 `curIndex`：包括k（当前父行索引），m（当前子行索引），key（点击单元格所在列关键字）
on-select	在多选模式下有效，选中某一项时触发（rowSelect为true或者点击多选框时生效）	`selection`：已选项数据 `row`：刚选择的项数据
on-select-cancel	在多选模式下有效，取消选中某一项时触发	`selection`：已选项数据 `row`：取消选择的项数据
on-select-all	在多选模式下有效，点击全选时触发	`selection`：已选项数据
on-selection-change	在多选模式下有效，只要选中项发生变化时就会触发	`selection`：已选项数据
on-row-click	单击某一行时触发（不支持rowSelect属性）	`currentRow`：当前行的数据 `status`：当前行选中状态
on-scroll	表格内纵向滚动条滚动时触发	返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部）
on-expand	点击表头展开、折叠时触发	返回当前操作的分组表格数据data与展开状态status
on-row-dblclick	双击某一行时触发（不支持rowSelect属性）	`row`：双击当前行的数据 `obj`: 该行对应的唯一key值 _index 和选中状态的数据对象

# simpleGroupsTable slot

名称	说明
loading	加载中

# simpleGroupsTable column

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

属性	说明	类型	默认值
type	列类型，可选值为 index、selection、html	String	-
title	列头显示文字	String	#
key	对应列内容的字段名（只允许字母、数字或字母数字与下划线、短横线的组合）	String	-
width	列宽	Number	-
align	对齐方式，可选值为 `left` 左对齐、`right` 右对齐和 `center` 居中对齐	String	left
fixed	列是否固定在左侧，可选值为 `left` 左侧	String	-
hiddenCol	是否隐藏当前列	Boolean	false