HUI

# simpleTable 简单表格

# simpleTable 概述

主要用于展示大量结构化数据

tip
建议大量纯展示数据、不分页情况下使用（特别提醒关注表格 itemHeight 属性，抖动现象多是由 未设置该属性或 columns列配置上未设置 ellipsis 导致文本换行所引起）

# simpleTable 代码示例

# 带边线 多选 2000 条

表格的最简单用法。

# 单选 5000 条

on-current-change

# 8000 条数据

大量数据加载示例，（请勿做过多交互，10000 条数据下循环交互会比较慢）

# toScrollTop

是否滚动至设置的滚动条位置

# 多级表头配置

# 冻结列配置

# 汇总行数据配置

# 控制表格焦点

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

# simpleTable API

TIP

SimpleTable简单表格 文档未公开的、带下划线的内部私有变量请不要使用，内部变量随时可能删减或修改

# simpleTable props

属性 说明 类型 默认值
data 显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。 Array []
columns 表格列的配置描述，具体项见后文 Array []
addData 滚动加载的新数据。存放于此可提高页面渲染速度、保持列表勾选状态，而不会重新渲染所有数据 Array []
headerHeight 表头项高度（自己改了样式时配置，必须保持与表头高度一致） Number
itemHeight 每列项高度（自己改了样式时配置，必须保持表格每项高度一致） Number 40
stripe 是否显示间隔斑马纹 Boolean false
border 是否显示纵向边框 Boolean false
width 表格宽度，单位 px Number | String 自动
height 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 (必填) Number | String 400
canDrag 表格是否可拖动（必须再 border 存在的情况下）改变表格列宽 Boolean true
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
    loadingText 自定义表格加载中文本(v1.0.73) String 加载中
    headAlgin 表头文字显示位置，left 左对齐、 right 右对齐和 center 居中对齐，优先级低于 clomns 里面的 algin String left
    bodyAlgin 表格体文字显示位置，left 左对齐、 right 右对齐和 center 居中对齐，优先级低于 clomns 里面的 algin String left
    notSort data（数据）发生变化时，数据不进行重新排序此属性只在 1.0.21 或以上版本有效） Boolean false
    multiLevel 提供 simpleTable 组件多级表头，不支持冻结列,其配置项目，具体见后文（此属性只在 1.0.21 或以上版本有效） Array null
    notAdaptive 表格宽度拖动时不进行自适应（此属性只在 1.0.23 或以上版本有效） Boolean false
    splitIndex 让 index 列在交互样式上脱离交互状态（此属性只在 1.0.25 或以上版本有效） Boolean false
    defaultFocusIndex 光标在表格中默认选中位置，使得可以从该行开始进行键盘上下键切换，值从 0 开始设置【需设置 highlight-row 属性，与 data 中设置_highlight 不可同时使用,在$nextTick 中设置】（此属性只在 1.0.26 或以上版本有效） Number -
    scrollTopSet 滚动条距离顶部的默认位置（v1.0.26） Number 0
    toScrollTop 是否滚动至设置的滚动条位置（结合 scrollTopSet，defaultFocusIndex 使用）（v1.0.26） Boolean false
    canMove 表格是否可拖动,改变表格列顺序(v1.0.31) Boolean false
    lastColWidth 列宽拖动时有效，表示最后一列在变小时的最小宽度（v1.0.32） Number 80
    summationData 列汇总之后的一条数据,格式参考 data（v1.0.35） Array []
    dataCheckedProp data 中默认添加_checked 属性记录当前选中状态，注：如初始化有默认选中项（_checked 为 true）当选中项改变时，也会同步当前选中状态(v1.0.40) Boolean false
    summationRender 汇总列是否执行 render(v1.0.46) Boolean true
    rowSelectOnly 单选或多选时支持点击行进行选中,再次点击不进行反选，多选时仅能通过勾选框反选(不能与 rowSelect 同时使用,需要开启 highlight-row)(v1.0.47) Boolean false
    titleEllipsis 控制表头文字过多是否缩略显示，必须给定 width 生效(v1.0.51) Boolean true
    isFilter 是否启用过滤，且仅支持在显式分页（非滚动分页）的情况下使用(v1.0.55) Boolean false
    showTitle 表格全局配置，开启后，鼠标悬浮将展示全部文本内容（v1.0.72）。优先级高于 column 对象中的 showTitle 属性。 Boolean false
    customTrKey 配置 tr 绑定的数据，为 String 时从 data 内取配置的字段名，为 Array 时从 data 内取配置的字段名拼接。
    例如data内有个 sid 字段，配置 customTrKey="sid",表格渲染时tr标签将与这个字段值绑定
    例如 data 内有 sid、uid 字段，配置: customTrKey="['sid','uid']",表格渲染时 tr 标签将与这两个字段拼接的值绑定 (customTrKey为Array)    		 String -
    canDblclickTr 控制是否可双击行触发双击事件（默认开启，不需要行双击事件可关闭，单双击间隔 300ms 关闭可改善单击略微延迟体验） Boolean true
    isComplementColWidth 控制拖拽缩小最后一列列宽时是否用相邻列补齐差值 Boolean false

    # simpleTable events

    事件名 说明 返回值
    on-right-click 行右点击事件，disable 时不可点击
  • currentRow：当前选中行的数据
  • _index：当前高亮行的数据的角标(V.1.43)
    • on-current-change 开启 highlight-row 后有效，当前选项发生变化时有效
  • currentRow/null：当前已经选中的数据/当前未有选中数据时返回为空
  • index/null：当前已经选中的数据角标/当前未有选中数据时返回为空（此属性只在 v1.0.20 及以上版本有效）
    • on-current-change-cancel 开启 highlight-row 后有效，当表格的当前行取消选中的时候会触发
  • currentRow：当前取消行的数据
  • oldCurrentRow：上一次高亮的数据
  • _index：当前取消行的数据的角标
    • on-select 在多选模式下有效，选中某一项时触发
  • selection：已选项数据
  • row：刚选择的项数据
    • on-select-cancel 在多选模式下有效，取消选中某一项时触发
  • selection：已选项数据
  • row：取消选择的项数据
    • on-select-all 在多选模式下有效，点击全选时触发
  • selection：已选项数据
    • on-selection-change 在单选多选模式下均有效，只要选中项发生变化时就会触发
  • selection：已选项数据
  • index：已选项角标（此属性只在 v1.0.20 及以上版本有效）
  • inx：当前鼠标点击行 index，没有当前点击行时，返回 null（v1.0.34）
    • on-row-click 单击某一行时触发
  • row：单击当前行的数据
  • index：该行对应的唯一key值 _index
    • on-row-dblclick 双击某一行时触发
  • row：双击当前行的数据
  • obj: 该行对应的唯一key值 _index 和选中状态的数据对象
    • on-scroll 表格内纵向滚动条滚动时触发;v1.0.63 版本更新：横向滚动不触发 on-scroll 返回第一个参数是当前纵向滚动条距离底部的距离（为 0 时表示滚动条已经滚动到最底部）；第二个参数为滚动方向（"x"代表水平滚动，"y"代表垂直滚动，v1.0.47）
    on-drag 拖动表头是触发 返回当前拖动表头的宽度，和返回当前拖动表头 key
    on-sort-change 点击排序 icon 是触发 （此属性只在 v1.0.21 及以上版本有效） 返回当前 column key order
    on-move 拖动表头列排序时触发(此属性只在 v1.0.31 或以上版本有效) 返回当前拖动表头原本的 index 和拖动后的 index
    on-filter 过滤选择或者重置时触发，返回过滤后的数据(v1.0.58)) 过滤后的数据

    # simpleTable slot

    名称 说明
    loading 加载中
    nodata 无数据时可进行自定义配置（v1.0.72）

    # simpleTable methods

    方法名 说明 参数
    getSelection 获取当前已经选中的项 无
    exportCsv 将数据导出为 .csv [v1.0.21 及其以上版本支持]文件，说明：
  • 若导出数据需要换行，则需要在数据中需要换行处添加 br 标签<br>
  • 支持 10~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。
  • Safari 需要手动修改后缀名为 .csv。
    		•  params(Object):
  • filename 文件名，默认为 table.csv
  • origina 是否导出为原始数据，默认为 true
  • noHeader 不显示表头，默认为 false
  • columns 自定义导出的列数据
  • data 自定义导出的行数据

    • 说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义 render 时，可以根据需求自定义导出内容
    toggleIsCurrent 切换当前焦点所在,参数为 true 表示获取焦点，为 false 则失去焦点（v1.9.0 版本废弃，实现表格焦点功能可参考"控制表格焦点"示例） true/false
    handlesort 清除所有排序时使用(此属性只在 v1.0.64 版本以及以上有效) this.$refs.xxx.handleSort('all','normal');

    # simpleTable column

    属性 说明 类型 默认值
    type 列类型，可选值为 index、selection String -
    title 列头显示文字 String #
    key 对应列内容的字段名（只允许字母、数字或字母数字与下划线、短横线的组合） String -
    width 列宽 Number -
    minWidth 表格最小宽度，单位 px Number | String --
    fixed 是否固定 可选 left/right null
    align 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 String left
    className 列的样式名称 String -
    ellipsis 开启后，文本将不换行，超出部分显示为省略号 Boolean false
    showTitle 开启后，鼠标悬浮将展示全部文本内容（v1.0.51） Boolean false
    render 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据（columns 内列数据），当前行索引。 Function -
    renderHeader 自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据（columns 内列数据）和当前列索引。 Function -
    sortType 初始化排序 （此属性只在 v1.0.21 及以上版本有效）可选 asc asc String --
    sortable 是否显示排序按钮 （此属性只在 v1.0.21 及以上版本有效） Boolean false
    remote 排序时是否进行本地排序，开启则不进行本地排序（v1.0.35） Boolean --
    filters 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置 表格上 isFilter 及 column 上 filterMethod Array -
    filterMethod 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 Function -
    filterMultiple 数据过滤的选项是否多选 Boolean true
    sortMethod 自定义排序方法，回调参数：a 行当前单元格值，b 行当前单元格值，当前排序方法，a 行数据，b 行数据[1.2.3 版本新增]，其中返回整行数据是为了方便比对自定义值 Function -

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

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

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

    # simpletable 性能

    不同行数据条数下加载时间

    # 1000（行）*10（列） 5000（行）*10（列） 10000（行）*10（列）
    无 render 421ms 847ms 1341ms
    有 render 442ms 889ms 1499ms

    不同列数据条数下加载时间

    多列无 render 30（行）*30（列） 30（行）*60（列） 30（行）*90（列）
    加载时间 364ms 399ms 423ms

    滚动加载-首屏不同行数据条数下加载时间

    首屏行列无 render 20（行）*10（列） 30（行）*10（列） 50（行）*10（列）
    加载时间 325ms 333ms 341ms