HUI

# SimpleTreeGird 简单树表格

TIP

SimpleTreeGird 简单树表格 (此组件只在v1.0.25或以上版本有效 )

# SimpleTreeGird 概述

# SimpleTreeGird 代码演示

# 基本用法

最简单的用法，展示基本的树表格。树表格数据为 tree 型数据

# 显示多选框

多项选择

# 显示 checkbox 且父子不联动用法

多项选择父子不联动

# SimpleTreeGird API

# SimpleTreeGird props

属性 说明 类型 默认值
data 显示的结构化数据 Array []
columns 表格列的配置描述，具体项见后文 Array []
border 是否显示纵向边框 Boolean true
show-header 是否显示表头 Boolean true
width 表格宽度，单位 px Number | String 自动
height 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 Number | String -
disabled-hover 禁用鼠标悬停时的高亮 Boolean false
highlight-row 是否支持高亮选中的行，即单选 Boolean true
no-data-text 数据为空时显示的提示内容 String 暂无数据
isCheckbox 是否显示多选框 Boolean false
checkStrictly 多选模式下多选框是否不联动 Boolean false
loading 表格是否加载中 Boolean false
headSelection 配置表头全选多选框，只对显示多选框时有效 Boolean false
canDrag 配置列宽可拖动 Boolean false
selectRoot 配置后点击选中选中当前所在树(只限于2级树表格)（v1.0.28） Boolean false
canMove 表格是否可拖动,改变表格列顺序(v1.0.38) Boolean false
row-class-name 行的 className 的回调方法，传入参数：(v1.0.49)
  • row：当前行数据
  • id：当前行的id
    		•  Function -
    multiLevel 提供simpleTreegrid组件多级表头，仅支持左冻结,其配置项目，具体见后文（此属性只在1.0.59或以上版本有效） Array null
    showTitle 是否显示title（此属性只在1.12.0或以上版本有效） Boolean false
    rowSelectOnly 多选时支持点击行进行选中,再次点击不进行反选，多选时仅能通过勾选框反选（此属性只在1.21.0或以上版本有效） Boolean false

    # SimpletreeGird events

    事件名 说明 返回值
    on-select-change 在多选模式下有效，只要选中项发生变化时就会触发
  • selection：已选项数据
  • index：已选项数据角标(v1.0.32)
    • on-expand 树表格子项展开时触发
  • item 当前展开节点(Object)
  • status 当前父级节点是否展开( Boolean )
    • on-row-click 单击某一行时触发 当前行的数据
    on-row-dblclick 双击某一行时触发 当前行的数据
    on-scroll 表格内纵向滚动条滚动时触发 返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部）
    on-select-all headSelection 模式下 表头多选框点击时触发（v1.0.24） 当前选中状态
    on-drag 表格拖动宽度后触发 width 当前列宽度
    key 当前列序列
    on-select-root 设置 selectRoot 后触发（v1.0.28） 当前树的树根节点
    on-move 拖动表头列排序时触发(v1.0.40) 返回当前拖动表头原本的 index 和拖动后的

    # SimpletreeGird methods

    名称 说明
    expandRow(id,status)(v1.0.34) 展开树表格某行， id 表示行id， status Boolean类型表示展开/关闭
    clearSelected(v1.0.35) 清空当前已选项，isCheckbox为true时有效
    selectRow(id,status)(v1.0.36) 高亮选择某行, id 表示行id， status Boolean类型表示选中/取消,默认true
    checkedRow(id,status)(v1.0.47) 某行多选框选中, id 表示行id， status Boolean类型表示选中/取消,默认true
    selectAll(status)(v1.0.49) 全选/全不选， status Boolean类型表示选中/取消,默认true
    forceUpdate(v1.0.55) 强制刷新表格行。
    eg: 表格数据重新赋值时可调用
    getAllData 获取数据(v1.7.0)

    # multiLevel

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

    属性 说明 类型 默认值
    title 多级显示文字 String #
    cols 当前表头所占跨列数 Number 1
    rows 当前表头所占跨行数，被跨行单元格右移动 Number 1
    align 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐 String left
    className 表头单元格样式名 String -
    hiddenCol 是否隐藏当前表头列 Boolean false
    fixed 表头标题是否固定在左侧或者右侧，可选值为 left 左侧 String -
    fixedTheadHeight 在当前列无跨行，整体多行表头时，设置当前行高，保证对齐 Number -

    # SimpletreeGird slot

    名称 说明
    loading 加载中

    # SimpleTreeGird column

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

    属性 说明 类型 默认值
    title 列头显示文字 String #
    key 对应列内容的字段名（key 关键字不与样式名重叠） String -
    width 列宽 Number -
    align 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 String left
    fixed 列是否固定,可选值为 left(v1.0.48) right(v1.0.54) String -
    ellipsis 是否开启超出省略 Boolean false
    hiddenCol 是否隐藏当前列 Boolean false
    render 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。(v1.0.28) Function -
    renderHeader 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据（columns内列数据）和当前列索引(v1.0.28) Function -
    type column类型设置，可配置html(v1.0.66)表示单元格内容以html片段显示，默认text显示 String -

    # SimpleTreeGird data

    表格数据对象，data中除了columns中已定义的内容之外，可自定义该数据节点是否展开、异步加载等

    属性 说明 类型 默认值
    id 当前项关键字 String -
    _parentId 当前项父项关键字 String -
    expand 是否展开子节点 Boolean | String false
    children 子节点属性数组 Array -
    leaf 叶子节点属性，设置 leaf 为 true 后该节点为叶子节点，children 和 loading 将无效（v1.0.54） Boolean | String -
    loading 用于控制显示表示加载中的图标（v1.0.54） Boolean | String -

    # simpletreegird 性能

    不同数据条数下加载时间

    # 1000（行）*10（列） 5000（行）*10（列） 10000（行）*10（列）
    无 render 462ms 705ms 1186ms
    有 render 492ms 721ms 1244ms