高性能表格

介绍

高性能表格能够高效展示大量数据，并提供良好的可视化效果和交互体验。

API

Props

参数名	描述	类型	默认值
status	默认状态	'default' \| 'hide'	'default'
loading	是否为加载中状态	boolean	false
size	尺寸，表格的尺寸，主要影响行高	'medium' \| 'small' \| 'mini'	'medium'
data	数据配置	array	-
rowKey	数据主键	string	-
rowSelectType	行选择模式,表格行的选中模式	'none' \| 'multiple' \| 'single'	'none'
selectedRows	已选中的行	Array	-
rowOrder	表格序号列	boolean	false
showTableOperate	操作列	boolean	false
tableOperateWidth	列宽,操作列的宽度	number	200
tableButtons	操作按钮,操作列的操作按钮	Array	-
record	当前操作行，可绑定变量，当用户进行操作列按钮点击操作时，绑定的变量会同步进行改变	Record<string,any>	-
fixedLeft	左侧固定列数	number	-
allowFixedLeft	左侧允许可操作固定列数,出现横向滚动轴时，左侧支持可以动态交互固定的列数	number	-
showfixedIcon	显示固定列图标,出现横向滚动轴时，是否出现支持点击用来动态固定列的图标	boolean	true
fixedRight	右侧固定列数,出现横向滚动轴时，右侧固定的列数量	number	-
bottomFixedRowCount	底部固定行数,出现纵向滚动轴时，底部固定的行数量	number	-
width	宽,表格所在容器的宽度，注意，当列宽计算模式选择标准或自动宽度时，当各列宽总和小于宽时，表格所在容器宽度会有留白	string	'100%'
height	高,表格所在容器的高度，注意，当行高计算模式选择自适应内容高度时，当各行高总和小于高时，表格所在容器高度会有留白	string	'500px'
widthMode	列宽计算模式,standard(标准)：使用列宽度属性指定的宽度作为列宽度；adaptive(自适应容器宽度)：使用表格容器的宽度分配列宽度；autoWidth(自动宽度)：根据列头和表格单元格中内容的宽度自动计算列宽度，忽略列宽度属性的设置	string	'standard'
heightMode	行高计算模式自适应容器高度：使用容器的高度分配每行高度，基于每行内容计算后的高度比例来分配；adaptive(自适应内容高度)：autoHeight(自适应容器高度)，计算依据文字大小和文字行高，以及内边距。相关搭配自动换行设置项自动换行，可以根据换行后的多行文本内容来计算行高	string	'autoHeight'
autoWrap	自动换行,单元格内容超过列宽时是否自动换行展示	boolean	false
maxRows	最大行数，开启自动换行后的最大换行行数	number	-
hoverType	鼠标悬停样式，鼠标悬停在单元格时的高亮形式，row(整行) / cross(十字交叉) / cell(单个单元格)	string	'row'
customMergeCell	自定义单元格合并,通过自定义的方式全局控制表格单元格合并	code	-
customSelectStyle	自定义选中样式,通过自定义的方式控制单元格选中的样式	code	-
customHoverStyle	自定义悬浮样式,通过自定义的方式全局控制鼠标悬浮在单元格时的样式	code	-
treeData	启用树形	boolean	false
onExpand	展开收起触发的事件	code	-

Props-数据列

参数名	描述	类型	默认值
title	表头的标题	string	-
name	数据字段，表格列对应的数据展示字段	string	-
colType	单元格类型，单元的数据展示类型， text(文本) / link(链接) / img(图片) / progressbar(数据条)	string	'text'
fieldFormat	数据格式化,对单元格数据通过编码形式进行格式化处理	code	-
editType	编辑器类型,表格行的选中模式,none(不允许编辑) / input(输入框) / date(日期选择) / select(下拉选择)	string	'none'
options	选项数据,下拉选择的选项数据	array	-
width	列宽度，注意，只有在列宽计算模式为标准时起作用	array	-
titleOperate	列头操作,列头支持的操作,sorter(排序)/filter(筛选)	string	'filter'
groupTitle	分组标题，同分组标题的数据列表头合并，表头值为groupTitle值	string	-
hide	隐藏列	boolean	false
mergeCell	合并单元格,相邻行当该列单元格数据相同时是否进行自动合并	boolean	false
keepAspectRatio	保持横纵比，colType为img时可配置	boolean	-
imageAutoSizeing	按图片尺寸自动撑开单元格，colType为img时可配置	boolean	-
barType	数据条类型，default(普通)/negative(支持负值)/negativeNoAxis, colType为progressbar时可配置	string	'default'
min	最小值，colType为progressbar时可配置	number	-
max	最大值，colType为progressbar时可配置	number	100
customColumn	自定义参数	code	-
style	自定义单元格样式	code	-

Events

事件名	描述	参数
onMounted	挂载完成后执行	ctx
onCellValueChange	单元格编辑数据失去焦点时触发	ctx params: Params
onMouseEnterCell	监听单元格 hover 事件	ctx params: Params

// onCellValueChange 参数
type Params = {
  "col": number,
  "row": number,
  "value"?: string,
  "table": TableInstance, // 高性能表格实例，提供实例方法
  "rowRecord":{
    [key: string]: any
  } // 当前行数据
}

// onChange 参数
type ChangeParams = {
  "checked":boolean,
  "checkKey":string,
  "value":string[]
}[]

// 循环变量数据参数
type LoopParams = {
  "indexName":string,
  "paramName":string,
  "ref":ComputedRefImpl, // 全部的循环变量数据
  "row":number,
  "rowIndex":number
}[]

常见场景配置

公式计算

公式计算是可编辑表格常用的场景，假设有num1、num2、num3三个字段，当修改num1时，需将num3的值重新计算为num1和num2的和，该场景可通过以下方式实现：

将数字1字段列配置中的「编辑器类型」设置为输入框。
添加表格事件「onCellValueChange」，在该事件中进行逻辑实现。其中，表格实例方法可参照附录：表格实例方法

/**
 * @description: 单元格数据变化时触发
 * @param params { col: number, row: number, value: string, table: 表格实例, rowRecord: 当前行数据 }
 */
 
function onCellValueChange(ctx, params) {
  const { col, row, value, table } = params;
  // 编辑的数据字段
  const field = table.getHeaderField(col, row)
  // 编辑单元格所在行数据
  const record = table.getRecordByCell(col, row)
  if (field === 'num1') {
    // 若修改的是num1字段，将num3设置为num1与num2的和
    const newNum3 = value + record.num2
    table.updateRecords([{
      ...record,
      num3: newNum3
    }], [row - 1])
  }
}

合并单元格

单元格合并是指多个单元格合并为一个单元格，常用在重复内容合并显示等功能上。高性能表格支持自动合并及自定义合并两种模式。

1、自动合并

在数据列的某列的配置中打开「合并单元格」开关，高性能表格会将该列数据相邻行相同值的单元格进行自动合并。

2、自定义合并单元格

可在「高级」-「自定义单元格合并」进行自定义合并。该需函数返回一个对象，包含以下三个属性以确认合并规则：

text: 合并单元格内的文字
range: 合并的范围
style: 合并单元格的样式。支持的样式属性可参照附录：样式属性

下方示例中，我们将列索引为1~2，行索引为1~2的范围进行单元格合并，并将合并后的单元格内容显示为“合并后的内容”，且背景色设置为红色。

/**
 * @description: 单元格数据变化时触发
 * @param ctx 上下文参数
 * @param params { col: number, row: number, table: 表格实例 }
 */
 
function onCellValueChange(ctx, { col, row, table }) {
  if (col >= 1 && col <= 2 && row >= 1 && row <= 2) {
    return {
      text: '合并后的内容',
      range: {
        start: {
          col: 1,
          row: 1
        },
        end: {
          col: 2,
          row: 2
        }
      },
      style: {
        bgColor: 'red'
      }
    };
  }
}

单元格背景色

高性能表格会有根据单元格值动态设置背景色的场景，我们可以在「数据列」-「自定义单元格样式」处进行背景色等单元格样式设置，下面示例展示了当单元格值大于10时，显示为红色，否则显示为绿色。

function cellStyle() {
  return {
    bgColor(args){
	   if(args.value > 10) {
	     return 'red';
	   }
	   return 'green';
	 }
  }
}

单元格tooltip配置

在组件中添加onMouseEnterCell事件

/**
 * @description: 监听单元格 hover 事件
 * @param params { col: number, row: number, table: 表格实例, rowRecord: 当前行数据 }
 */
function onMouseEnterCell(ctx, params) {
  const {
    col,
    row,
    table
  } = params;
  // 判断是否为数据单元格
  if (col >= 0 && row >= 1) {
    const rect = table.getVisibleCellRangeRelativeRect({
      col,
      row
    });
    table.showTooltip(col, row, {
      // tooltip内容
      content: 'Order ID：' + table.getCellValue(col, row),
      // tooltip位置
      referencePosition: {
        rect,
        placement: "right"
      },
      // 自定义样式
      className: 'defineTooltip',
      style: {
        bgColor: 'black',
        color: 'white',
        font: 'normal bold normal 14px/1 STKaiti',
        arrowMark: true,
      },
      // 显示延迟时间
      disappearDelay: 100,
    });
  }
}

附录：表格实例方法

records

获取当前表格的全部数据

getHeaderField

根据行、列索引获取单元格对应的数据字段。

getHeaderField: (col: number, row: number)

getRecordByCell

根据行、列索引获取单元格所在的行数据。

getRecordByCell: (col: number, row: number)

getCellOriginValue

获取单元格的数据值

getCellOriginValue(col: number, row: number): FieldData;

setRecords

设置表格数据接口，可作为更新接口调用。可同时设置排序状态对表格数据排序，sortState 设置为 null 清空排序状态，如果不设置则按当前排序状态对传入数据排序。

setRecords(
  records: Array<any>,
  option?: { sortState?: SortState | SortState[] }
): void;

updateRecords

根据行、列索引数组修改行数据，支持同时修改多条。

updateRecords(records: any[], recordIndexs: number[])

addRecords

添加数据，支持多条数据

/**
* 添加数据 支持多条数据
* @param records 多条数据
* @param recordIndex 向数据源中要插入的位置，从0开始。不设置recordIndex的话 默认追加到最后。
* 如果设置了排序规则recordIndex无效，会自动适应排序逻辑确定插入顺序。
* recordIndex 可以通过接口getRecordShowIndexByCell获取
*/

addRecords(records: any[], recordIndex?: number)

deleteRecords

删除数据，支持多条数据

/**
* 删除数据 支持多条数据
* @param recordIndexs 要删除数据的索引（显示到body中的条目索引）
*/

deleteRecords(recordIndexs: number[])

附录：样式属性

注意：样式的值可为字符串或函数形式

// 字符串类型
bgColor: 'red'

// 函数类型
bgColor(args){
  if(args.value > 10)
    return 'red';
  return 'green';
}

单元格背景色

bgColor：背景色

文字样式

textAlign：定义单元格内文字的水平对齐方式
color：定义单元格的文字颜色
fontSize：定义单元格文字大小
fontWeight：定义单元的文字字体粗细

边框

borderColor：单元格设置边框的颜色
borderLineWidth：单元格设置边框的宽度

行高、换行设置

lineHeight：为单格内容设置文字行高
textOverflow：设置文本的省略形式。如果自动换行设置自动换行，该配置无效

布局组件

通用组件

表单组件

高级组件

图表组件

AI组件

布局组件

基础组件

表单组件

高级组件

组件实战案例

离线打包

高性能表格 ​

介绍 ​

API ​

Props ​

Props-数据列 ​

Events ​

常见场景配置 ​

公式计算 ​

合并单元格 ​

1、自动合并 ​

2、自定义合并单元格 ​

单元格背景色 ​

单元格tooltip配置 ​

附录：表格实例方法 ​

records ​

getHeaderField ​

getRecordByCell ​

getCellOriginValue ​

setRecords ​

updateRecords ​

addRecords ​

deleteRecords ​

附录：样式属性 ​

单元格背景色 ​

文字样式 ​

边框 ​

行高、换行设置 ​

高性能表格

介绍

API

Props

Props-数据列

Events

常见场景配置

公式计算

合并单元格

1、自动合并

2、自定义合并单元格

单元格背景色

单元格tooltip配置

附录：表格实例方法

records

getHeaderField

getRecordByCell

getCellOriginValue

setRecords

updateRecords

addRecords

deleteRecords

附录：样式属性

单元格背景色

文字样式

边框

行高、换行设置