高级表格

介绍

表格组件是中后台系统中最为常用的数据组件，高级表格组件内包含了数据的表格展示、表格的操作按钮以及表格的查询搜索等功能，我们提供了丰富的功能和样式选择以满足不同场景下对表格展示的需要。为了保证交互配置的便捷性，我们不再对表格组件进行更多的组件拆分，全部通过配置项的形式提供给用户进行低代码配置。

API

Props 属性-基础配置

参数	描述	类型	默认值
默认状态	表格的显示隐藏状态, "默认"\|"隐藏"	string	'default'
标题	表格上方显示的标题	string	''
显示标题	控制标题的显示隐藏状态	boolean	false
显示序号	控制序号列的显示隐藏状态	boolean	false

Props 属性-数据列

参数	描述	类型	默认值
标题	表格列标题	string	'default'
数据字段	与表格数据的映射字段名称	string	''
数据展示类型	该字段在表格单元格中的展示类型（文本、连接、图片、附件、状态、标签等）	string	'text'
自定义展示配置	当字段展示类型为'自定义'时，可配置自定义渲染函数。渲染函数同时支持配置 '鼠标点击' 等事件，详情参考帮助文档。	function	渲染函数默认见下面自定义展示配置
数据编辑格式	内置的新增、修改、查询区域中该字段的编辑格式（见下面表格Props 属性-数据列-数据编辑格式）	-	-
隐藏列	是否在表格中隐藏该列展示	boolean	false
分组标题	用于复合表头类型表格，当多个连续列的分组标题设置为相同内容时，这多个列会展示为复合表头形式，复合表头标题为填写内容	string	''
列宽	表格列宽度	number	-
列头提示文字	若进行设置，会在表头标题旁显示提示图标，鼠标移入展示提示内容	string	''
列头对齐	表格列标题单元格的对齐方式，'居左' \| '居中' \| '居右'	string	'left'
数据对齐	表格内容单元格的对齐方式，'居左' \| '居中' \| '居右'	string	'left'
内筒超出...截断	表格单元格内容超出时是否显示...	boolean	false

自定义展示配置

javascript

/**
 *  自定义渲染函数 
 *  data: { record: TableData; column: TableColumnData; rowIndex: number; }
 *  ctx: PangeaContext
 **/
function render(data, ctx) {
  // 支持返回jsx渲染内容
  // 例如 return <span style="color: orange">{record[column.dataIndex]}</span>;
  const record = data.record;
  const column = data.column;
  return record[column.dataIndex]
}

Props 属性-数据列-数据编辑格式

参数	描述	类型	默认值
数据编辑格式	数据编辑的预设格式，可选。【文本 \| 数字 \| 文本域 \| 下拉选择 \| 日期选择 \| 树选择】	string	'input'
占位提示	数据编辑时的占位提示信息	string	-
数据校验	数据校验方式，可选无校验或预设的优先校验或自定义校验	string	-
正则表达式	自定义数据校验的正则表达式	string	-
数字精度	通过控制数字的小数位数，来控制数字精度	number	-
最大值	数字的最大值	number	-
最小值	数字的最小值	number	-
最大长度	文本域的最大字符长度	number	-
自适应内容高度	是否开启自适应内容高度	boolean	false
字数统计	是否开启字数统计	boolean	false
允许清除	是否开启允许清除	boolean	false
按钮	是否显示控件后的按钮	boolean	false
图标选择	控件后的按钮的图标	string	-
数据编辑格式-单选/复选	数据仅支持单选还是支持复选	string	'single'
选项类型	下拉选择的选项来源类型，可选。【自定义	接口获取	数据联动】
指定字段配置项	选项数据中 key 和 title 对应的取值字段	FieldNames
数据配置	配置下拉选择选项数据属性	Object[]	-
搜索	是否开启搜索	boolean	false
查询API	选项的来源类型为接口获取时，配置接口api，可选项来源于页面API管理面板维护列表	API	-
关联数据	选项的来源类型为数据联动时，关联数据的字段名	string	-
联动查询API	选项的来源类型为数据联动时，关联数据变化时调用的查询API，可选项来源于页面API管理面板维护列表	API	-
日期类型	数据编辑格式为日期选择时，日期类型的配置，可选。【默认	月	周
范围选择	数据编辑格式为日期选择时，是否开启日期范围选择	boolean	false
日期格式	数据编辑格式为日期选择时，日期格式的配置，可选。【 YYYY-MM-DD	MM-DD	YYYY-MM-DD HH:mm
多选	数据编辑格式为树选择，开启多选模式	boolean	false
开启虚拟列表	数据编辑格式为树选择，开启虚拟滚动	boolean	false
可视区域高度	数据编辑格式为树选择，虚拟列表滚动高度	string	'200'
是否过滤选项	数据编辑格式为树选择，开启是否本地查询过滤数据	boolean	false
是否为加载状态	数据编辑格式为树选择，选择框是否是加在状态，用于动态查询	boolean	false
可选节点	数据编辑格式为树选择，配置节点中的数据是否可选	String<function>	-
开启异步加载	数据编辑格式为树选择，配置树节点数据异步加载	boolean	false
异步加载函数	数据编辑格式为树选择，配置树节点展开时的数据异步加载逻辑	String<function>	-

Props 属性-数据源

参数	描述	类型	默认值
通过API获取	表格数据是否通过API获取	boolean	false
表格数据	配置表格数据属性，需包含rows和total属性。表格数据支持数据绑定。	{ rows: Record<string,any>[], total: number }	`{ "rows": [],"total": 0}`
表格数据(API获取)	绑定API，可先在API管理面板维护表格的查询API信息，再在表格数据源配置处打开`通过API获取`开关，`表格数据（API获取）`选择创建好的API。	API	-

注意

请不要忘记数据主键属性的配置，该属性用于标注表格数据的唯一值字段，通常为id字段。该字段会用于删除操作传参。

Props 属性-顶部操作

参数	描述	类型	默认值
显示操作栏	顶部操作区域的显隐状态	boolean	true
操作按钮	顶部操作区域的按钮设置，支持内置新增、删除、导入按钮及自定义按钮。内置导入按钮的配置方式见底部内置导入功能配置示例	OButton[]	-
表单值	在新增按钮配置面板中的内置表单中配置，支持绑定变量	Record<string,any>	{}
刷新	刷新快捷操作按钮显隐状态	boolean	false
筛选	筛选快捷操作按钮显隐状态，筛选操作用于用户自定义查询条件及查询操作符	boolean	false
设置	设置快捷操作按钮显隐状态，设置操作用于用户自定义表格行密度（仅支持本地存储）、自定义列显隐状态及展示顺序（可配置本地存储或API存储）。	boolean	false
存储策略	配置自定义列显隐状态及展示顺序的存储策略，可选。'本地'\|'API'	string	'local'
保存表格设置的API	配置API存储策略时保存的api。如果不做配置，将使用盘古提供的默认接口	api	-
查询表格设置的API	配置API存储策略时查询的api。如果不做配置，将使用盘古提供的默认接口	api	-

Props 属性-行操作

参数	描述	类型	默认值
行选择器	表格勾选操作行的状态（关`none`、单选`single`、复选`multiple`）	string	'none'
勾选方式	表格行勾选方式（勾选框、点击行）	string	'checkbox'
最大条数	填写空或者0不限制选择数量，设置最大可选数量后不可全选	number
已选中的行	勾选的行数据，可绑定变量，当用户进行勾选行操作时，绑定的变量会同步进行改变	Record<string,any>[]	[]
勾选行数据改变时	用户勾选行回调事件配置，事件函数params参数对象包含selectedRowKeys（勾选行的数据主键数组）和selectedRows（勾选行数据数组）两个属性	action	-
点击行选择器时触发	用户勾选行回调事件配置，事件函数params参数对象包含rowKeys（勾选行的数据主键数组）、rowKey（勾选行主键）、record(当前行数据)三个属性	action	-
点击全选选择器时触发	用户勾选行回调事件配置，事件函数params参数对象包含checked（勾选状态）和rows（当前表格数据）两个属性	action	-
表格行元素的类名	表格行绑定的class名称	string	''
行拖拽	是否开启表格行拖动排序（关、锚点）	string	'none'
显示操作栏	操作列显隐状态	boolean	true
宽度	操作列宽度	number	200
操作配置	操作栏中操作的配置	OButton[]	-
表单值	在操作配置中编辑操作配置面板中的内置表单中配置，支持绑定变量	Record<string,any>	{}
最大展示数量	操作列按钮的最大展示数量，超过数量会将超出按钮显示到`更多`按钮中	number	3
当前操作行	当前操作的行数据，可绑定变量，当用户进行操作列按钮点击操作时，绑定的变量会同步进行改变	Record<string,any>	-

Props 属性-搜索

参数	描述	类型	默认值
类型	搜索区域的类型（完整、简约、关）	string	'default'
默认展开	搜索区域默认是否展开（类型===完整）	boolean	false
展开收起通栏展示	展开收起操作是否单独一行展示，关闭后展开收起放在按钮操作上（类型===完整）	boolean	true
查询条件	查询条件配置	EditColumn[]	[]
查询默认值	查询默认值配置	Record<string,any>	{}
标题宽度	查询区域表单项标题宽度	number	100
布局	查询条件的响应式栅格设置	Record<string,any>	`{xs:24,sm:12,md:12,lg:12,xl:8,xxl:6}`

Props 样式

参数	描述	类型	默认值
自定义样式	表格整体自定义样式	string	-
尺寸	表格整体尺寸大小,可选（'大' \| '中' \| '小' \| '迷你'）	string	'medium'
表格宽度	表格的宽度，可选单位为像素或百分比	number	-
滚动容器宽度	表格实际宽度超出时出现滚动条，可选单位为像素或百分比	number	-
滚动容器高度	表格实际高度超出时出现滚动条，可选单位为像素或百分比	number	-
显示边框	控制表格是否显示边框	boolean	false
显示斑马纹	控制表格是否显示斑马纹	boolean	false
显示表头	控制表格是否显示表头	boolean	true

Props 高级-基础配置

参数	描述	类型	默认值
唯一标识	组件的唯一标识	string	-
空数据文案	表格数据为空时显示的文案内容	string	'暂无数据'
行高亮显示	决定高亮显示的数据，值为「数据主键」数组	array<string \| number>	-
合并单元格	通过调用函数返回合并的行数和合并的列数，函数示例见下方代码	function	-
是否允许调整列宽	控制是否允许用户调整列宽	boolean	true

单元格合并示例

/**
 *  单元格合并函数 
 *  params: { rowIndex: number; columnIndex: number; column: TableColumnData; record: object; }
 **/
function spanMethod(params, ctx) {
  if (params.rowIndex === 1 && params.columnIndex === 1) {
    return {
      rowspan: 2,
      colspan: 3
    }
  }
}

Props 高级-分页

参数	描述	类型	默认值
是否分页	控制是否开启分页	boolean	true
类型	分页器的样式风格类型，可选（'默认' \| '简约'）	string	'default'
当前页数	分页器的当前页数，支持绑定变量	number	-
每页展示数量	表格每页最多展示数据的条数	number	-
单页时隐藏分页	是否在只有一页时隐藏分页器	boolean	false
显示数据总数	是否显示数据总数	boolean	true
自定义总条数内容	自定义显示数据总数的逻辑	function	-
显示数据条数选择器	是否显示数据条数选择器	boolean	true
条数选项列表	数据条数选择器的可选项	string	`10,20,30,40,50`
显示跳转	是否显示跳转	boolean	true

Props 高级-树形表格

参数	描述	类型	默认值
启用树形	控制是否开启树形表格	boolean	false
展开渲染的行	决定展开的行数据	Record<string,any>[]	-
展开收起触发的事件	展开收起触发的动作	function	-

Props 高级-固定列

参数	描述	类型	默认值
固定列	控制是否开启固定列	boolean	false
左侧固定列数	左侧固定的列数	number	-
右侧固定列数	右侧固定的列数	number	-

Events

Events 属性-基础配置

事件名	描述	回调参数
onSearch	分页、搜索、排序时触发	ctx, params: { pageNum:number, pageSize:number, searchInfo: Record<string, any>, from: "search"\|"reset"\|"pagination"\|"order"\|"filter" }
onDragEnd	表格拖拽排序时触发	ctx, params: Array<Record<string,any>>
onRowClick	点击行数据时触发	ctx, params: Array<Record<string,any>>

Events 属性-数据列

事件名	描述	回调参数
onClick	在数据编辑格式配置面板内配置，适用于文本、数字、文本域类型的字段，在新增弹窗、编辑弹窗、搜索面板的表单内的相应字段点击时触发	ctx

Type

javascript


// 操作按钮配置
type OButton = {
  name: string,
  title: string,
  type: string,
  status: string,
  authControl: boolean,
  showCondition: string,
  ableCondition: string,
  icon: string,
  columns: EditColumn[],
  deleteText: string
}

// 查询条件配置
type EditColumn = {
  name: string,
  title: string,
  spanNum: number,
  required: boolean,
  selected: boolean,
  default: string
}

// 指定字段配置
type FieldNames = {
  key: string,
  title: string,
  // 指定其他字段名
  [name: string]: string,
}

// 上传接口返回数据结构
type UploadResponse = {
  code: number|string,
  // 导入接口返回数据中涉及数据字段名的地方，请对应当前高级表格组件中配置的字段信息中的数据字段名，否则会出现数据展示异常。
  data: UploadResponseData,
}
type UploadResponseData = {
  header: Record<string, string>, 
  data: Array<Record<string,any>>
}

// OnAfterUpload事件脚本执行返回数据结构
type AfterUploadData = {
  // 预览表格的列展示配置 
  tableColumns: Array<{ title: string, dataIndex: string, width: number }>,
  // 预览表格的列表数据
  tableData: Array<Record<string, any>>,
  // 最终调用保存接口时提交的数据
  submitData: Array<Record<string, any>>,
  // 预览表格顶部提示的不匹配字段
  errorColumns: Array<string>
}

常见场景配置

内置导入功能配置示例

1、配置导入action，为默认的POST类型接口，上传文件数据的字段名为file，该导入接口需要返回所导入文件内的文件数据，返回数据结构定义见UploadResponse。数据示例如下：

json

{
  code: 0,
  data: {
    header: {
      "name": "姓名",
      "employDate": "入职日期",
      "contractDate": "合同日期",
      "salary": "月薪",
    },
    data: [
      {
        "name": "小王",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      },
      {
        "name": "小明",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      }
    ]
  }
}

2、如果导入接口返回数据结构不符合UploadResponse定义的标准，可以在前端处理，为导入按钮配置OnAfterUpload事件处理函数，在函数中把接口返回的导入数据解析转换为导入功能可接受的数据结构（AfterUploadData），将其在该函数中返回。例如：

javascript

/**
 * 上传后
 * 
 */
function action(ctx, params) {
  // 上传接口返回的数据
  const { response } = params;
  
  // 进行一系列解析转换的处理
  // ...
  
  // 返回处理后的数据（示例数据）
  return {
    // 预览表格的列配置数据
    tableColumns: [
      {
        title: "姓名",
        dataIndex: "name"
      },
      {
        title: "入职日期",
        dataIndex: "employDate"
      },
      {
        title: "合同日期",
        dataIndex: "contractDate"
      },
      {
        title: "月薪",
        dataIndex: "salary"
      },
    ],
    // 预览表格的列表数据
    tableData: [
      {
        "name": "小王",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      },
      {
        "name": "小明",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      }
    ],
    // 最终调用保存导入数据接口时提交的数据
    submitData: [
      {
        "name": "小王",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      },
      {
        "name": "小明",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      }
    ],
    // 预览表格顶部会提示哪些字段与高级表格字段配置不匹配
    errorColumns: []
  }
}

设置表格高度撑满页面剩余高度

1、表格自定义样式设置

less

:rootNode {
  height: calc(100vh - 200px); // 整个表格高度，根据页面剩余高度自行调整
  display: flex;
  flex-direction: column;
  .arco-table {
    flex: 1;
  }
}

2、设置表格容器滚动高度为任意固定值

跨页选择数据处理 (示例如下)

1、定义三个变量

allSelectedRows 表格所有的勾选行数据
selectedRows 表格当前分页勾选行数据
tableData 表格数据

表格设置的数据主键为：loginName

2、切换分页，表格接口数据获取后对selectedRows进行赋值，可直接将allSelectedRows的值赋给selectedRows，注意：赋值时数据深拷贝一下。

3、行操作设置-点击行选择器时触发

javascript

  const {rowKeys, rowKey, record} = params;
  // 判断当前点击行选择器是勾选还是取消勾选
  if (rowKeys.includes(rowKey)) {
    // 为勾选数据
    if (!ctx.state.allSelectedRows.some(i => i.loginName === rowKey)) {
      ctx.state.allSelectedRows.push(record)
    }
  } else {
    // 为取消勾选数据
    const index = ctx.state.allSelectedRows.findIndex(i => i.loginName === rowKey)
    if (index >= 0) {
      ctx.state.allSelectedRows.splice(index, 1)
    }
  }

4、行操作设置-点击全选选择器时触发

javascript

const {
    checked,
    rows
  } = params
  if (checked) {
    // 全勾选
    rows.forEach(item => {
      if (!ctx.state.allSelectedRows.some(i => i.loginName === item.loginName)) {
        ctx.state.allSelectedRows.push(item)
      }
    })
  } else {
    // 取消全勾选
    rows.forEach(item => {
      const index = ctx.state.allSelectedRows.findIndex(i => i.loginName === item.loginName)
      if (index >= 0) {
        ctx.state.allSelectedRows.splice(index, 1)
      }
    })
  }

布局组件

通用组件

表单组件

高级组件

图表组件

AI组件

布局组件

基础组件

表单组件

高级组件

组件实战案例

离线打包

高级表格 ​

介绍 ​

API ​

Props 属性-基础配置 ​

Props 属性-数据列 ​

自定义展示配置 ​

Props 属性-数据列-数据编辑格式 ​

Props 属性-数据源 ​

Props 属性-顶部操作 ​

Props 属性-行操作 ​

Props 属性-搜索 ​

Props 样式 ​

Props 高级-基础配置 ​

单元格合并示例 ​

Props 高级-分页 ​

Props 高级-树形表格 ​

Props 高级-固定列 ​

Events ​

Events 属性-基础配置 ​

Events 属性-数据列 ​

Type ​

常见场景配置 ​

内置导入功能配置示例 ​

设置表格高度撑满页面剩余高度 ​

跨页选择数据处理 (示例如下) ​

高级表格

介绍

API

Props 属性-基础配置

Props 属性-数据列

自定义展示配置

Props 属性-数据列-数据编辑格式

Props 属性-数据源

Props 属性-顶部操作

Props 属性-行操作

Props 属性-搜索

Props 样式

Props 高级-基础配置

单元格合并示例

Props 高级-分页

Props 高级-树形表格

Props 高级-固定列

Events

Events 属性-基础配置

Events 属性-数据列

Type

常见场景配置

内置导入功能配置示例

设置表格高度撑满页面剩余高度

跨页选择数据处理 (示例如下)