HUI

# simpleGroupTable 高性能分组表格

# simpleGroupTable 概述

通过对数据进行嵌套分组，显示分组表格，并采用虚拟滚动实现高性能，主要用于展示大量结构化数据。不支持可编辑类型。

TIP

注意：该组件是高定制化组件，对数据进行嵌套分组显示；本表格仅支持基本场景的表格功能（详见官网文档），复杂业务场景及影响性能的场景不支持。使用前请做好充足的调研。

# simpleGroupTable 代码示例

# 基础用法

simpleGroupTable最简单的用法。

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

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

on-expand :点击表头展开、折叠时触发，返回当前操作的分组表格数据data与展开状态status。

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

# 滚动设置

on-scroll:表格内纵向滚动条滚动时触发，返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部）。

# 控制表格焦点

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

# 多选分组

可进行多项选择。

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

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

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

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

# 固定列

通过给数据 columns 的项设置 fixed 为 left ，可以左固定需要的列。

# simpleGroupTable API

# simpleGroupTable props

属性 说明 类型 默认值
data 显示的结构化数据（分组表格请使用嵌套，并给出 title 属性） 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
    showTitle 开启后，鼠标悬浮将展示全部文本内容 Boolean false
    itemHeight 每列项高度（自己改了样式时配置，必须保持表格每项高度一致） Number 40

    # simpleGroupTable events

    事件名 说明 返回值
    on-current-change 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发
  • currentRow/null：当前已经选中的数据/当前未有选中数据时返回为空
  • index/null：当前已经选中的数据角标/当前未有选中数据时返回为空
    • on-select 在多选模式下有效，选中某一项时触发（rowSelect为true或者点击多选框时生效）
  • selection：已选项数据
  • row：刚选择的项数据
    • on-select-cancel 在多选模式下有效，取消选中某一项时触发
  • selection：已选项数据
  • row：取消选择的项数据
    • on-select-all 在多选模式下有效，点击全选时触发
  • selection：已选项数据
    • on-selection-change 在单选多选模式下均有效，只要选中项发生变化时就会触发
  • selection：已选项数据
  • index：已选项角标
  • inx：当前鼠标点击行 index，没有当前点击行时，返回 null
    • on-row-click 单击某一行时触发（不支持rowSelect属性）
  • row：单击当前行的数据
  • index：该行对应的唯一key值 _index
    • on-row-dblclick 双击某一行时触发（不支持rowSelect属性）
  • row：双击当前行的数据
  • obj: 该行对应的唯一key值 _index 和选中状态的数据对象
    • on-scroll 表格内纵向滚动条滚动时触发 返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部）
    on-expand 点击表头展开、折叠时触发 返回当前操作的分组表格数据data与展开状态status

    # simpleGroupTable slot

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

    # simpleGroupTable column

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

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