vxe-table-middleware

# 说明

提示

optionsHelper 是帮助构建 vxe-grid props 属性配置的工具，核心是将对象配置转化为函数式编程方式，以提供一定的 TS 类型支持。大部分实例方法名与vxe-grid props 属性名保持一致，少数做了整合，如将 height、min-height、max-height 合并为 height方法，其他整合或拓展详见文档描述。

# 基本使用

# 引入

import { optionsHelper } from 'vxe-table-middleware';
1

# 使用

  1. 调用optionsHelper方法，返回配置实例，可以通过链式调用方法的方式来配置vxe-grid props 属性。
  2. 最后将实例对象传递给 grid 构建工具useVxeGrid
const options = optionsHelper();
options.height('300px').border(true).align('left', { headerAlign: 'center' });
1
2

# 合并配置场景

实例提供一个merge方法，可以将多个配置对象合并到当前实例，比如一些局部场景的公共配置。

someCommonOptions.js

import { optionsHelper } from 'vxe-table-middleware';

const options = optionsHelper();
options.height({ maxHeight: '500px' }).border(true).stripe(false).align('center');

export default options; // 导出实例对象
1
2
3
4
5
6

somePage.vue






 










 















<template>
  <vxe-grid-wrap ref="gridRef" :grid="grid" />
</template>
<script>
import { optionsHelper, columnsHelper, useVxeGrid } from 'vxe-table-middleware';
import someCommonOptions from './someCommonOptions'; // 导入公共配置
export default {
  data() {
    return { grid: null };
  },
  mounted() {
    this.initGrid();
  },
  methods: {
    initGrid() {
      const options = optionsHelper();
      options.showFooter(true).merge(someCommonOptions); // 合并公共配置，如果需要覆盖公共配置，可以在`merge`方法之后调用需要覆盖的属性的方法

      // 列配置，详见文档描述
      const columns = columnsHelper();
      columns.type('checkbox').fixed('left');
      columns.field('name').title('名称').end();
      columns.field('age').title('年龄').end();
      columns.field('address').title('地址').end();
      // ...

      this.grid = useVxeGrid({ options, columns });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 其他说明

如果一个表格场景基本使用全局配置，应用时只为设置表格高度等，可以考虑使用VxeGridWrap组件属性配置，这样会更简单。

# optionsHelper 实例方法

# function merge(optionsHelperIns)

合并其他由选项配置工具函数实例创建的配置项

Parameters

  • optionsHelperIns (object) - 选项配置工具函数实例

Returns

  • - this

# function id(id)

唯一标识（被某些特定的功能所依赖）

Parameters

  • id (string) - 标识值

Returns

  • - this

# function height(height)

高度设置 或者 最大高度/最小高度设置

Parameters

  • height (string, number, object) - 高度配置

Returns

  • - this

# function autoResize(autoResize)

自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）

Parameters

  • autoResize (boolean) - 默认false

Returns

  • - this

# function syncResize(syncResize)

自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来控制显示/隐藏切换时可能会用到）

Parameters

  • syncResize (boolean, string, number) - 默认false

Returns

  • - this

# function stripe(stripe)

是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式）

Parameters

  • stripe (boolean) - 继承全局配置

Returns

  • - this

# function border(border)

是否带有边框

Parameters

  • border (boolean, string) - 默认false，继承全局配置，default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）

Returns

  • - this

# function round(round)

是否为圆角边框

Parameters

  • round (boolean) - 默认false，继承全局配置

Returns

  • - this

# function size(size)

表格的尺寸

Parameters

  • size (string) - 尺寸，继承上下文，'medium' | 'small' | 'mini'

Returns

  • - this

# function loading(loading)

表格是否显示加载中

Parameters

  • loading (boolean) - 默认true

Returns

  • - this

# function align(align, extra)

所有的列对齐方式

Parameters

  • align (string) - 对齐方式 'left' | 'center' | 'right'
  • extra (object) - 单独配置所有列的headerAlign、footerAlign

Returns

  • - this

# function showHeader(showHeader)

表格是否显示表头

Parameters

  • showHeader (boolean) - 默认true

Returns

  • - this

# function addClassName(type, className)

给行/列/表头/表尾附加类名

Parameters

  • type (string) - 类名位置类型，row | cell | header-row | header-cell | footer-row | footer-cell
  • className (string, function) - 类名或返回类名的方法

Returns

  • - this

# function showFooter(showFooter)

表格是否显示表尾

Parameters

  • showFooter (boolean) - 默认false

Returns

  • - this

# function footerData(footerData)

表尾数据

Parameters

  • footerData (array) - 表尾数据

Returns

  • - this

# function mergeCells(mergeCells)

临时合并指定的单元格 (不能用于展开行，不建议用于固定列、树形结构)

Parameters

  • mergeCells (array) - Array<{ row: number, col: number, rowspan: number, colspan: number }>

Returns

  • - this

# function mergeFooterItems(items)

临时合并表尾 (不能用于展开行，不建议用于固定列、树形结构)

Parameters

  • items (array) - Array<{ row: number, col: number, rowspan: number, colspan: number }>

Returns

  • - this

# function showOverflow(showOverflow, extra)

设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）

Parameters

  • showOverflow (boolean, string) - boolean | 'ellipsis' | 'title' | 'tooltip'
  • extra (object) - 单独配置header、footer是否显示省略及表现

Returns

  • - this

# function keepSource(keepSource)

保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）

Parameters

  • keepSource (boolean) - 默认false，继承全局配置

Returns

  • - this

# function columnConfig(columnConfig)

列配置信息

Parameters

  • columnConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function currentColumnConfig(config)

当前列配置信息

Parameters

  • config (object) - 配置项，继承全局配置

Returns

  • - this

# function cellConfig(cellConfig, extra)

单元格配置项，表头表尾单元格配置项

Parameters

  • cellConfig (object) - 配置项，继承全局配置
  • extra (object) - 单独配置header-cell-config、footer-cell-config，{ header: {}, footer: {} }

Returns

  • - this

# function rowConfig(rowConfig)

行配置信息

Parameters

  • rowConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function currentRowConfig(config)

当前行配置信息

Parameters

  • config (object) - 配置项，继承全局配置

Returns

  • - this

# function aggregateConfig(config)

数据聚合配置项

Parameters

  • config (object) - 配置项，继承全局配置

Returns

  • - this

# function rowGroupConfig(config)

vxe-table版本已废弃，请使用 aggregateConfig

Parameters

  • config (object) - 配置项，继承全局配置

Returns

  • - this

# function resizableConfig(resizableConfig)

列宽拖动配置项

Parameters

  • resizableConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function seqConfig(seqConfig)

序号配置项

Parameters

  • seqConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function sortConfig(sortConfig)

排序配置项

Parameters

  • sortConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function rowDragConfig(rowDragConfig)

行拖拽配置项

Parameters

  • rowDragConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function columnDragConfig(columnDragConfig)

列拖拽配置项

Parameters

  • columnDragConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function filterConfig(filterConfig)

筛选配置项

Parameters

  • filterConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function exportConfig(exportConfig)

导出配置项

Parameters

  • exportConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function importConfig(importConfig)

导入配置项

Parameters

  • importConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function printConfig(printConfig)

打印配置项

Parameters

  • printConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function radioConfig(radioConfig)

单选配置项

Parameters

  • radioConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function checkboxConfig(checkboxConfig)

复选配置项

Parameters

  • checkboxConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function tooltipConfig(tooltipConfig)

tooltip 配置项

Parameters

  • tooltipConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function expandConfig(expandConfig)

展开行配置项（不支持虚拟滚动）

Parameters

  • expandConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function treeConfig(treeConfig)

树形结构配置项

Parameters

  • treeConfig (object) - 配置项，继承全局配置

Returns

  • - this

菜单配置项

Parameters

  • menuConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function mouseConfig(mouseConfig)

鼠标配置项

Parameters

  • mouseConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function keyboardConfig(keyboardConfig)

键盘配置项

Parameters

  • keyboardConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function editConfig(editConfig)

可编辑配置项

Parameters

  • editConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function validConfig(validConfig)

验证配置项

Parameters

  • validConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function editRules(editRules)

校验规则配置项

Parameters

  • editRules (object) - 配置项，继承全局配置

Returns

  • - this

# function emptyText(emptyText)

空数据时显示的内容

Parameters

  • emptyText (object) - 配置项，继承全局配置

Returns

  • - this

# function emptyRender(emptyRender)

空数据时显示的内容

Parameters

  • emptyRender (object) - 配置项，继承全局配置

Returns

  • - this

# function loadingConfig(loadingConfig)

加载配置项

Parameters

  • loadingConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function customConfig(customConfig)

自定义配置项

Parameters

  • customConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function virtualXConfig(virtualXConfig)

横向虚拟滚动配置项

Parameters

  • virtualXConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function virtualYConfig(virtualYConfig)

纵向虚拟滚动配置项

Parameters

  • virtualYConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function scrollbarConfig(scrollbarConfig)

滚动条配置项

Parameters

  • scrollbarConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function params(params)

自定义参数（可以用来存放一些自定义的数据）

Parameters

  • params (any)

Returns

  • - this

# function formConfig(formConfig)

表单配置项

Parameters

  • formConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function toolbarConfig(toolbarConfig)

工具栏配置项

Parameters

  • toolbarConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function pagerConfig(pagerConfig)

分页配置项

Parameters

  • pagerConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function zoomConfig(zoomConfig)

缩放配置项

Parameters

  • zoomConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function layouts(layouts)

自定义布局

Parameters

  • layouts (object) - 配置项，继承全局配置

Returns

  • - this

# function proxyConfig(proxyConfig)

代理配置项

Parameters

  • proxyConfig (object) - 配置项，继承全局配置

Returns

  • - this

# function proxyHandlers(proxyHandlers)

代理处理函数，同 proxyConfig.ajax 配置项，目的仅为减少配置层级

Parameters

  • proxyHandlers (object) - 配置项

Returns

  • - this
上次更新: 2025/7/30 05:52:59

← 案例 →