盘古低代码

高性能表格 ​

image

介绍 ​

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

API ​

Props ​

参数说明类型默认值
默认状态展示状态默认 / 隐藏默认
尺寸表格的尺寸，主要影响行高中 / 小 / 迷你默认
数据配置表格的数据-
数据主键表格的数据主键string-
数据列表格的列配置-
行选择模式表格行的选中模式无 / 复选 / 单选无
已选中的行已选中的行数据Array-
序号列是否展示表格序号列boolean否
显示操作列是否显示操作列boolean否
列宽操作列的宽度number200
操作按钮操作列的操作按钮Array-
左侧固定列数出现横向滚动轴时，左侧固定的列数量number-
左侧允许可操作固定列数出现横向滚动轴时，左侧支持可以动态交互固定的列数number-
显示固定列图标出现横向滚动轴时，是否出现支持点击用来动态固定列的图标boolean是
右侧固定列数出现横向滚动轴时，右侧固定的列数量number-
底部固定行数出现纵向滚动轴时，底部固定的行数量number-
宽表格所在容器的宽度，注意，当列宽计算模式选择标准或自动宽度时，当各列宽总和小于宽时，表格所在容器宽度会有留白string'100%'
高表格所在容器的高度，注意，当行高计算模式选择自适应内容高度时，当各行高总和小于高时，表格所在容器高度会有留白string'500px'
列宽计算模式标准：使用列宽度属性指定的宽度作为列宽度；自适应容器宽度：使用表格容器的宽度分配列宽度；自动宽度：根据列头和表格单元格中内容的宽度自动计算列宽度，忽略列宽度属性的设置标准 / 自适应容器宽度 / 自动宽度标准
行高计算模式自适应容器高度：使用容器的高度分配每行高度，基于每行内容计算后的高度比例来分配；自适应内容高度：根据内容自动计算行高，计算依据文字大小和文字行高，以及内边距。相关搭配自动换行设置项自动换行，可以根据换行后的多行文本内容来计算行高自适应内容高度 / 自适应容器高度自适应内容高度
自动换行单元格内容超过列宽时是否自动换行展示boolean否
鼠标悬停样式鼠标悬停在单元格时的高亮形式整行 / 十字交叉 / 单个单元格整行
自定义单元格合并通过自定义的方式全局控制表格单元格合并code-
自定义选中样式通过自定义的方式控制单元格选中的样式code-
自定义悬浮样式通过自定义的方式全局控制鼠标悬浮在单元格时的样式code-

Props 数据列 ​

参数说明类型默认值
表头标题表头的标题string-
数据字段表格列对应的数据展示字段string-
单元格类型单元的数据展示类型文本 / 链接 / 图片 / 数据条文本
数据格式化对单元格数据通过编码形式进行格式化处理code-
编辑器类型表格行的选中模式不允许编辑 / 输入框 / 日期选择 / 下拉选择不允许编辑
选项数据下拉选择的选项数据array-
列宽列宽度，注意，只有在列宽计算模式为标准时起作用array-
列头操作列头支持的操作排序-
合并单元格相邻行当该列单元格数据相同时是否进行自动合并boolean否

Events ​

事件名说明回调参数
onCellValueChange单元格编辑数据失去焦点时触发ctx: 上下文对象, params: { col: number, row: number, value: string, table: 表格实例 }

常见场景配置 ​

公式计算 ​

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

  1. 将数字1字段列配置中的「编辑器类型」设置为输入框。
  2. 添加表格事件「onCellValueChange」，在该事件中进行逻辑实现。其中，表格实例方法可参照 附录：表格实例方法
js
/**
 * @description: 单元格数据变化时触发
 * @param params { col: number, row: number, value: string, table: 表格实例 }
 */
 
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的范围进行单元格合并，并将合并后的单元格内容显示为“合并后的内容”，且背景色设置为红色。

js
/**
 * @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时，显示为红色，否则显示为绿色。

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

附录：表格实例方法 ​

records ​

获取当前表格的全部数据

getHeaderField ​

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

js
getHeaderField: (col: number, row: number)

getRecordByCell ​

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

js
getRecordByCell: (col: number, row: number)

getCellOriginValue ​

获取单元格的数据值

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

setRecords ​

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

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

updateRecords ​

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

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

addRecords ​

添加数据，支持多条数据

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

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

deleteRecords ​

删除数据，支持多条数据

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

deleteRecords(recordIndexs: number[])

附录：样式属性 ​

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

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

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

单元格背景色 ​

  • bgColor：背景色

文字样式 ​

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

边框 ​

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

行高、换行设置 ​

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