HUI

# treeGird 树表格

# treeGird 概述

目前支持编辑类型：文本，文本域，金额，卡号，日期，时间，下拉列表，下拉树，复选框组件。
表格单元格可编辑,可对列配置校验规则进行单个检验

# treeGird 代码示例

# 基本用法

最简单的用法，展示基本的树表格。
data数据项中 expanded 控制展开，foldable 控制当前叶子节点是否显示可折叠按钮

# 单选用法

进行单选选择以及校验

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

多项选择

# 显示checkbox且父子联动用法

直接显示编辑框校验

# 汇总行

汇总行

# treeGird API

# treeGird 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 false
size 表格尺寸 (只修改表头尺寸)，可选值为 large、small、default 或者不填 String -
no-data-text 数据为空时显示的提示内容 String 暂无数据
isCheckbox 是否显示多选框 Boolean false
checkStrictly 多选模式下多选框是否不联动 Boolean false
loading 表格是否加载中 Boolean false
cloneData 通过 this.$refs.xxx.cloneData 获取 table 内改变后的数据 -- --
multiLevel 提供多级表头，其配置项目，具体见后文（此属性只在1.0.39或以上版本有效） Array null
stripe 是否显示间隔斑马纹(v1.0.43) Boolean false
headSelection 配置表头全选多选框，只对显示多选框时有效(v1.0.52) Boolean false
summationData 列汇总之后的一条数据，格式参考 data。只显示第一个数据项的数据（v1.0.55） Array []
isCompleteSort 是否完全排序（排序需要配置 column 里的配置项 sortable 为 true），如果配置为 true，则所有元素排序（父元素会进行排序，子元素之间也会进行排序），否则只是最外层的父元素排序（v1.086） Boolean false
indentLeft 设置层级之间缩进的距离，使层级更清晰，不能低于20，默认值为20 (v1.10.0) Number 20

# treeGird events

事件名 说明 返回值
on-current-change 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发
  • currentRow：当前高亮行的数据
  • oldCurrentRow：上一次高亮的数据
    • on-select-change 在多选模式下有效，只要选中项发生变化时就会触发
  • selection：已选项数据
    • on-expand 树表格子项展开时触发
  • status 当前父级节点是否展开(Boolean)
    • on-row-click 单击某一行时触发 当前行的数据和index
    on-scroll 表格内纵向滚动条滚动时触发 返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部）
    on-editselect-change treegird 中 select 组件选择项发生变化时触发（v1.0.39） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-editinput-change treegird 中 input 组件选择项发生变化时触发（v1.0.39） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-editinput-blur treegird 中 input 组件失去焦点时触发（v1.0.39） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-editarea-change treegird 中 area 组件选择项发生变化时触发（v1.0.39） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-editarea-blur treegird 中 area 组件失去焦点时触发（v1.0.39） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-money-change treegird 中 money 组件选择项发生变化时触发（v1.0.39） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-money-blur treegird 中 money 组件失去焦点触发（v1.0.27） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据
    on-editdate-change treegird 中 date 组件选择项发生变化时触发（v1.0.33） 返回4个参数，分别为当前值，当前项在表格中的横坐标和纵坐标，当前行数据

    # treeGird slot

    名称 说明
    loading 加载中

    # treeGird method

    方法名 返回值
    getTreeSelection 返回已选中的项(适用于 isCheckbox 为 true 的情况，返回 check 为 true 的已加载节点数据)

    # treeGird column

    属性 说明 类型 默认值
    type 列类型，可选值为 index、text、textArea、money、card、select、date、time、selectTree、 String -
    title 列头显示文字 String -
    key 对应列内容的字段名（key关键字不与样式名重叠） String -
    width 列宽 Number -
    align 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 String left
    headAlign 表头对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐（v1.0.28） String left
    rule 单元格验证规则 ，如{ required: true, message: XXX }分别表示必填，字段,触发方式默认为 blur Object --
    hiddenCol 是否隐藏当前列 Boolean false
    sortable 对应列是否可以排序(v1.0.86) Boolean false
    type 为 text 时 提供 placeholder，icon 属性字段，参考 input 组件 -- --
    type 为 textArea 时 提供 placeholder，row 属性字段，参考 input 组件 -- --
    type 为 money 时 提供 placeholder，integerNum，suffixNum，bigTips，isround 属性字段，参考 typefield 组件 -- --
    type 为 card 时 卡号类型不提供属性字段配置，参考 typefield 组件 -- --
    type 为 select 时 提供 option,placeholder，notFoundText 属性字段，参考 select 组件， (option用法请参照示例)(目前只支持单选用法) -- --
    type 为 date 时 提供 placeholder，editable 属性字段，参考 date 组件， -- --
    type 为 time 时 提供 placeholder，editable,step 属性字段，参考time组件， -- --
    type 为 selectTree 时 提供 placeholder，data属 性字段，参考 selectTree 组件，(目前只支持单选用法) （data 为可嵌套的节点属性的数组，生成 tree 的数据），具体用参照示例 -- --
    hiddenOther 是否隐藏单元格内原有值(v1.0.26其以上版本支持) Boolean false
    ellipsis 当前单元格是否以省略号显示(v1.0.28) Boolean false
    showTooltip 单元格鼠标指针悬停时浮出提示信息展示完整单元格内容，通常可配合开启 ellipsis 属性使用(v1.0.36) Boolean false
    treeNode 节点收缩展开按钮和多选框将显示在第一个设置该属性为 true 的列上(v1.0.43) Boolean -

    # treeGird row

    data 数据对象的一项

    属性 说明 类型 默认值
    checked 默认选中当前行，需设置 isCheckbox（v1.0.40） Boolean false
    expanded 节点展开状态 Boolean false
    hidden 隐藏行，不影响选中状态（v1.0.42） Boolean false

    # multiLevel

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

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