API
基础组件

AppGrid

# 一、属性

# size

string

表格的尺寸。

默认值: 'small'

可选值: 'small'、'default'、'large'

提示

因 Vxe-Table 尺寸与 Ant Design 的大小不一致，底层做了兼容处理，对应关系如下:

Ant Design	Vxe-Table
small	mini
default	small
large	medium

# tableData

object

初始化表格数据。

注意

此属性未做双向绑定，在组件中，若使用 this.tableData 获取表格数据，结果可能不是想要的结果。
这时，应该通过 $table.getTableData().tableData 获取表格数据。
可以通过配置此属性，修改表格数据

# height

number | string

表格高度。

# editType

string

编辑类型，用于区分当前操作。

默认值: 'default'

可选值: 'default'、'add'、'update'

# app

string

标记当前组件是在哪个功能组件中使用的。

默认值: 'appGrid'

# selectedTreeNode

object

选中树节点的数据。

提示

当需要与 AppTree 关联时使用。

# formData

object

主表表单数据。

提示

当多表使用，用于记录主表数据。

# initFindFormData

object

初始化查询条件默认值。

提示

当页面跳转，需要传参时使用。

# selectedOption

object

行记录选中配置。用于回显选中行。

对象格式说明:

rows: array: 选中的行记录
dataIndex: string: 选中的字段编码

# mainGrid

object

表格配置项。

提示

AppGrid 是基于 <vxe-grid /> 封装的组件。这意味着它除了文档中提到的 API 外,还可以支持官方文档 (opens new window) 中的 API【若发现暂不支持的属性,请及时反馈！！！】。

# detailGridList

array<...mainGrid, title?>

多表格配置对象。

array 属性说明:

...mainGrid: 支持 mainGrid 的所有配置
title: string: 显示在 tab 标题

# 二、插槽

# tableTop

表格顶部插槽。

# tableTbarLeft

按钮组左侧插槽。

# tableCenter

表格中部插槽。

# 三、方法

# getTable()

获取表格实例对象。

调用此方法后，可使用的属性:

name: 表格名称 mainGrid.name
gridRef: 表格实例对象
editType: 编辑类型 mainGrid.editType
selectedRow: 选中行
lastSelectedRow: 上一次的选中行
searchType: 查询类型,default：默认 btn：搜索按钮 page：分页查询 enter：回车查询 reload:重载按钮 moreFind:更多（下拉）查询 sort:排序查询 filter:高级查询

调用此方法后，可使用的方法:

官方提供的方法 (opens new window)
setLoading(loading): 设置加载状态
setInitial(key, value): 设置初始化值
setSelectedRow(row): 设置选中行
reloadTable(reqParams): 调用查询接口（使用第一页），重新加载表格数据
getGridData(reqParams): 调用查询接口（使用当前页），加载表格数据，
clearTable(): 清除表格
getCheckedData(): 获取选中记录
getAllCheckedData(): 获取所有选中记录
clearAllCheckedData(): 清除所有选中记录
updateRows(rows): 更新行记录
importXlsx(params): 导入数据
tInsert(records, isActiveRow, insertRow): 插入数据
getFindFormData(): 获取查询条件表单数据
tableValidate(fullValidate): 表格校验
calculateTableHeight(): 计算表格高度
addRowsToTable(rows): 为表格批量添加行记录
buildSaveData(): 构建保存数据，自带校验，仅包含新增和修改的数据
tOpenModal(modalOption): 打开弹窗不建议使用
saveBefore(paramObj): 自定义保存时，供外部调用底层保存前方法
saveAfter(paramObj): 自定义保存时，供外部调用底层保存后方法
loadPageData(tableData): 加载表格分页数据
setTableData(tableData): 设置表格数据
getCheckboxIndeterminateData(): 获取表格半选记录
setTreeCheckboxRow(row, checked): 设置树表格选中
getUpdateRows(): 获取不校验选中字段的修改行
previewFile(previewParams, allowDownlod, downloadUrl): 预览文件

# 四、事件

# afterConstructor

({ that, grid }) => void

初始化完成之后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  afterConstructor: ({ that, grid }) => {}
}

1
2
3
4

# tFindBefore

({ that, grid, back }) => void

查询前执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tFindBefore: ({ that, grid, back }) => {}
}

1
2
3
4

# tFindAfter

({ that, grid, res, process, url, params }) => void

查询后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- res: object: 接口响应数据
- process: (res) => void: 处理响应数据
- url: string: 请求地址
- params: object: 请求参数

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tFindAfter: ({ that, grid, res, process, url, params }) => {}
}

1
2
3
4

# retrieveEnd

({ that, grid, tableData }) => void

查询后执行，在 mainGrid.tFindAfter 后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- tableData: array: 表格数据

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  retrieveEnd: ({ that, grid, tableData }) => {}
}

1
2
3
4

# tInsertBefore

({ that, grid, back }) => void

插入前执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tInsertBefore: ({ that, grid, back }) => {}
}

1
2
3
4

# tInsertAfter

({ that, grid, newRow }) => void

插入后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- newRow: object: 插入的行记录

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tInsertAfter: ({ that, grid, newRow }) => {}
}

1
2
3
4

# tSaveBefore

({ that, grid, back, modalOption?, modalRefs?, data?, proData? }) => void

保存前执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。
- modalOption: object: 增加/编辑弹窗配置项
- modalRefs: object: 弹窗中内的组件实例对象
- data: object: 弹窗的数据，不一定是待保存数据
- proData: (data) => void: 当弹窗数据不是保存数据时，对弹窗数据做处理

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tSaveBefore: ({ that, grid, back, modalOption?, modalRefs?, data?, proData? }) => {}
}

1
2
3
4

# tSaveAfter

({ that, grid, records, insertRecords, updateRecords, res }) => void

保存后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- records: array: 接口返回的数据集res.data
- insertRecords: object: 新增的数据
- updateRecords: array: 修改的数据
- res: object: 接口响应数据

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tSaveAfter: ({ that, grid, records, insertRecords, updateRecords, res }) => {}
}

1
2
3
4

# tDeleteBefore

({ that, grid, records, back }) => void

插入前执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- records: array: 待删除的行记录
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tDeleteBefore: ({ that, grid, records, back }) => {}
}

1
2
3
4

# tDeleteAfter

({ that, grid, row, res? }) => void

插入后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- row: object: 删除的行记录。
- res: object: 接口响应数据。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tDeleteAfter: ({ that, grid, newRow }) => {}
}

1
2
3
4

# tStartWorkflowBefore

({ that, grid, tbar, editOption, formData, proFormData, back }) => void

工作流启动前执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- tbar: object: 启动工作流的工具栏按钮对象
- editOption: object: 启动工作流的操作列按钮对象
- formData: object: 工作流表单数据
- proFormData: (data) => void: 处理工作流表单数据。当需要多选行记录时，需要将行记录转为表单对象
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tStartWorkflowBefore: ({ that, grid }) => {}
}

1
2
3
4

# tStartWorkflowAfter

({ that, grid, formData, res }) => void

工作流启动之后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- formData: object: 工作流表单数据
- res: object: 接口响应数据

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tStartWorkflowAfter: ({ that, grid, formData, res }) => {}
}

1
2
3
4

# lazyLoadAfter

({ that, grid, row, res }) => void

懒加载完成之后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- row: object: 懒加载行记录
- res: object: 接口响应数据

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  lazyLoadAfter: ({ that, grid, row, res }) => {}
}

1
2
3
4

# checkBoxChange

({ that, grid, row, checkedData?, checkboxRecords?, allCheckboxRecords?, tableData? }) => void

初始化完成之后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- row: object: 懒加载行记录
- checkedData: array: 选中记录
- checkboxRecords: array: 选中记录
- allCheckboxRecords: array: 所有选中记录，包含分页
- tableData: array: 当前页表格数据

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  checkBoxChange: ({ that, grid, row, checkedData?, checkboxRecords?, allCheckboxRecords?, tableData? }) => {}
}

1
2
3
4

# itemChanged

({ that, grid, value, oldValue, date?, time?, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => void

输入组件的值变化事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- value: string | number | boolean: 输入组件的值
- oldValue: string | number | boolean: 输入组件值变化前的值
- date: moment: 选中的日期
- time: moment: 选中的时间
- row: object: 行记录
- oldRow: object: 变化前的行记录
- rowIndex: number: 行索引位置
- column: object: vxe-table 列对象
- columnIndex: object: 列索引位置
- columns: object: 列配置对象
- formData: object: 表单数据对象
- editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid.columns 下。

mainGrid: {
  // ...
  columns: [
    // ...
    {
      // ...
      itemChanged: ({ that, grid, value, oldValue, date?, time?, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => {}
    }
  ]
}

1
2
3
4
5
6
7
8
9
10

# itemPressEnter

({ that, grid, value, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => void

输入组件的回车事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- value: string | number | boolean: 输入组件的值
- row: object: 行记录
- oldRow: object: 变化前的行记录
- rowIndex: number: 行索引位置
- column: object: vxe-table 列对象
- columnIndex: object: 列索引位置
- columns: object: 列配置对象
- formData: object: 表单数据对象
- editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid.columns 下。

mainGrid: {
  // ...
  columns: [
    // ...
    {
      // ...
      itemPressEnter: ({ that, grid, value, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => {}
    }
  ]
}

1
2
3
4
5
6
7
8
9
10

# itemFocus

({ that, grid, value, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => void

输入组件的获取焦点事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- value: string | number | boolean: 输入组件的值
- row: object: 行记录
- oldRow: object: 变化前的行记录
- rowIndex: number: 行索引位置
- column: object: vxe-table 列对象
- columnIndex: object: 列索引位置
- columns: object: 列配置对象
- formData: object: 表单数据对象
- editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid.columns 下。

mainGrid: {
  // ...
  columns: [
    // ...
    {
      // ...
      itemFocus: ({ that, grid, value, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => {}
    }
  ]
}

1
2
3
4
5
6
7
8
9
10

# itemBlur

({ that, grid, value, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => void

输入组件的丢失焦点事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- value: string | number | boolean: 输入组件的值
- row: object: 行记录
- oldRow: object: 变化前的行记录
- rowIndex: number: 行索引位置
- column: object: vxe-table 列对象
- columnIndex: object: 列索引位置
- columns: object: 列配置对象
- formData: object: 表单数据对象
- editType: string: 编辑类型

提示

该方法可直接挂载至 mainGrid.columns 下。

mainGrid: {
  // ...
  columns: [
    // ...
    {
      // ...
      inputBlur: ({ that, grid, value, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType }) => {}
    }
  ]
}

1
2
3
4
5
6
7
8
9
10

# showDropDownBefore

({ that, grid, row, oldRow, rowIndex, column, columnIndex, columns, formData?, editType, back }) => void

输入组件的丢失焦点事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- row: object: 行记录
- oldRow: object: 变化前的行记录
- rowIndex: number: 行索引位置
- column: object: vxe-table 列对象
- columnIndex: object: 列索引位置
- columns: object: 列配置对象
- formData: object: 表单数据对象
- editType: string: 编辑类型
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid.columns 下。

mainGrid: {
  // ...
  columns: [
    // ...
    {
      // ...
      showDropDownBefore: ({ that, grid, row, oldRow, rowIndex, column, columnIndex, columns, formData?,    editType, back }) => {}
    }
  ]
}

1
2
3
4
5
6
7
8
9
10

仅对 combobox、dropdownbox、treeselect 有效。

# beforeOpenHelper

({ that, grid, back }) => void

输入组件的丢失焦点事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  beforeOpenHelper: ({ that, grid, back }) => {}
}

1
2
3
4

# changeFlag 待调整

(show) => void

显示/隐藏 detail 面板。

参数说明:

show: boolean: 显示/隐藏 detail 面板

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  changeFlag: ({ that, grid, back }) => {}
}

1
2
3
4

# startProcessBefore

({ that, grid, detalist, proData, back }) => void

304 工作流启动前事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- detalist: array: 选中的记录
- proData: (data) => void: 处理数据
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  startProcessBefore: ({ that, grid, detalist, proData, back }) => {}
}

1
2
3
4

# cellClick

({ that, grid, record, oldRecord, column, back }) => void

行(单元格)点击事件。可重复点击。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- record: moment: 行记录
- oldRecord: moment: 变化前的行记录
- column: object: vxe-table 列对象
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  cellClick: ({ that, grid, record, oldRecord, column, back }) => {}
}

1
2
3
4

# rowFocusChanged

({ that, grid, record, oldRecord, column }) => void

行(单元格)点击事件。不可重复点击。在 mainGrid.cellClick 后执行。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- record: moment: 行记录
- oldRecord: moment: 变化前的行记录
- column: object: vxe-table 列对象

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  rowFocusChanged: ({ that, grid, record, oldRecord, column }) => {}
}

1
2
3
4

# rowDblClicked

({ that, grid, record, column }) => void

行（单元格）双击事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- record: moment: 行记录
- column: object: vxe-table 列对象

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  rowDblClicked: ({ that, grid, record, column }) => {}
}

1
2
3
4

# tOpenModalBefore

({ that, grid, modalConfig, back }) => void

打开弹窗前的事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- modalConfig: object: 弹窗配置
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  tOpenModalBefore: ({ that, grid, modalConfig, back }) => {}
}

1
2
3
4

只对 tOpenModal() 打开的弹窗有效。

# importBefore

({ that, grid, data, proData, back }) => void

打开弹窗前的事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- data: object: 待导入数据
- proData: (data) => void: 处理待导入数据
- back: (continueExec) => void: 是否需要拦截后续代码时调用，默认继续执行。back(false) 即可拦截。

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  importBefore: ({ that, grid, modalConfig, back }) => {}
}

1
2
3
4

# footerChange

({ that, grid, columns, sum, avg }) => void

表尾变化事件。

参数说明:

obj
- that: object: 当前组件的实例对象不建议使用
- grid: object: 表格对象推荐
- columns: object: 列配置对象
- sum: number: 列合计
- avg: number: 列平均值

提示

该方法可直接挂载至 mainGrid 下。

mainGrid: {
  // ...
  footerChange: ({ that, grid, columns, sum, avg }) => {}
}

1
2
3
4

← AppToolbar AppList→