高性能表格

介绍

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

API

Props

参数名	描述	类型	默认值
status	默认状态	'default' \| 'hide'	'default'
loading	是否为加载中状态	boolean	false
size	尺寸，表格的尺寸，主要影响行高	'medium' \| 'small' \| 'mini'	'medium'
data	数据配置	array	-
rowKey	数据主键	string	-
rowSelectType	行选择模式,表格行的选中模式	'none' \| 'multiple' \| 'single'	'none'
checkType	勾选方式	'checkbox' \| 'row'	'checkbox'
selectedRows	已选中的行	Array	-
rowOrder	表格序号列	boolean	false
showTableOperate	操作列	boolean	false
tableOperateWidth	列宽,操作列的宽度	number	200
tableButtons	操作按钮,操作列的操作按钮	ButtonItem	-
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'	'text'
linkPath	链接地址	Function	'function linkPath(ctx, params) { return ""; }'
fieldFormat	数据格式化,对单元格数据通过编码形式进行格式化处理	code	-
editType	编辑器类型,表格行的选中模式	'none'\| 'input'\| 'date'\| 'select'	'none'
editable	可编辑条件	Function	'function editable(ctx,params){ return true;}'
options	选项数据,下拉选择的选项数据	string[] \| {key:string,value:string}[]	-
width	列宽度，注意，只有在列宽计算模式为标准时起作用	array	-
titleOperate	列头操作,列头支持的操作	'sorter'\|'filter'	'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
titleAlign	列头对齐	'left'\|'center'\|'right'	'left'
customColumn	自定义参数	code	-
style	自定义单元格样式	code	-

Props 属性-表格设置

参数	描述	类型	默认值
tableSettings	设置，设置快捷操作按钮显隐状态，设置操作用于用户自定义表格行密度（仅支持本地存储）、自定义列显隐状态及展示顺序（可配置本地存储或API存储）。	boolean	false
defaultSettingCols	默认显示列，设置用户开启了表格设置但未配置自定义列时表格默认显示的列	Array<{name: string}>	默认勾选所有列
storagePolicy	存储策略，配置自定义列显隐状态及展示顺序的存储策略，可选。	'local'\|'api'	'local'
saveSettingsApi	保存表格设置的API，配置API存储策略时保存的api。如果不做配置，将使用盘古提供的默认接口	string	-
querySettingsApi	查询表格设置的API，配置API存储策略时查询的api。如果不做配置，将使用盘古提供的默认接口	string	-

Events

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

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

// ButtonItem 参数
type ButtonItem = {
  "id":number,
  "defaultStatus":'default'|'hide' // 默认状态
  "title":string // 标题
  "events":Object, // 事件配置
  "authControl":boolean // 权限控制
  "authDesc":string // 权限项描述
}

常见场景配置

公式计算

公式计算是可编辑表格常用的场景，假设有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,
    });
  }
}

单元格链接地址

// 表格数据
const columns = [
    {
    "name": "张三",
    "age": 20,
    "linkPath": 'https://pangea.hisense.com/'
  }
]

function linkPath(ctx, params) {
  //直接跳转链接，linkPath是链接数据属性字段名, 跳转到 'https://pangea.hisense.com/'
  return '{linkPath}'; 
  // 假如需要拼接参数查询，name可以为当前行数据中的任意字段名称, 跳转到 'https://pangea.hisense.com/search?q=张三'
  return 'https://pangea.hisense.com/search?q={name}'; 
}

配置搜索

在需触发搜索的事件中，调用高性能表格搜索相关方法

// 回调函数返回数据
type callbackData = {
   // 当前搜索高亮数据索引
  index:number,
  // 所有符合搜索调节的数据结果
  results:{
    col:number,
    row:number,
    value:string
  }[]
}[]

function action(ctx, params) {
  // 搜索
  ctx.triggerEvent('高性能表格组件id', 'search', {
    value:"搜索值",
    callback:function(data:callbackData){
      console.log(data)
    }
  });
  //  搜索上一个
  ctx.triggerEvent('高性能表格组件id', 'searchPrev', {
    value:"搜索值",
    callback:function(data:callbackData){
      console.log(data)
    }
  });
  // 搜索下一个
  ctx.triggerEvent('高性能表格组件id', 'searchNext', {
    value:"搜索值",
    callback:function(data:callbackData){
      console.log(data)
    }
  });
}

树形表格懒加载子节点数据

在一些场景下，子节点数据可能比较大，鉴于后台数据库性能压力过大，并不想一次性获取到全部数据，需要在点击展开时才进行调用接口来加载数据。那么可以使用如下方式来实现：

将需要进行懒加载的父节点children设置为true而非具体的数据集合，例如：

[
  {
    "name": "第一条",
    "age": 18,
    "children": true,
    "hierarchyState": "collapse"
  },
  {
    "name": "第二条",
    "age": 18,
    "children": [
      {
        "name": "2李四",
        "age": 20,
        "children": []
      }
    ],
    "hierarchyState": "collapse"
  }
]

展开收起触发的事件中，需要返回Promise对象，Promise对象返回children数据集合，例如：

function action(ctx, params) {
  if (params.hierarchyState === "expand" && params.record?.children === true) {
    // 展开节点并且children为true时，调用接口返回要插入的子节点数据
    return new Promise((resolve, reject) => {
      ctx.loadApi('接口名称', {}).then(res => {
        resolve({
          children: res // 此处为需要插入的子节点数据
        })
        if (!res ||res?.length === 0) {
          // 如果没有数据，则将当前节点展开
          params.record.hierarchyState = "expand"
        }
      })
    })
  }
  return {}
}

附录：表格实例方法

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-数据列 ​

Props 属性-表格设置 ​

Events ​

常见场景配置 ​

公式计算 ​

合并单元格 ​

1、自动合并 ​

2、自定义合并单元格 ​

单元格背景色 ​

单元格tooltip配置 ​

单元格链接地址 ​

配置搜索 ​

树形表格懒加载子节点数据 ​

附录：表格实例方法 ​

records ​

getHeaderField ​

getRecordByCell ​

getCellOriginValue ​

setRecords ​

updateRecords ​

addRecords ​

deleteRecords ​

附录：样式属性 ​

单元格背景色 ​

文字样式 ​

边框 ​

行高、换行设置 ​

高性能表格

介绍

API

Props

Props-数据列

Props 属性-表格设置

Events

常见场景配置

公式计算

合并单元格

1、自动合并

2、自定义合并单元格

单元格背景色

单元格tooltip配置

单元格链接地址

配置搜索

树形表格懒加载子节点数据

附录：表格实例方法

records

getHeaderField

getRecordByCell

getCellOriginValue

setRecords

updateRecords

addRecords

deleteRecords

附录：样式属性

单元格背景色

文字样式

边框

行高、换行设置