说明

提示

columnsHelper是帮助构建列配置的工具，将props.columns配置转化为函数编程的方式，提供一定的 TS 类型提示，方法名称基本与props.columns配置属性名相同（当前 3.9 版本），少量调整。

基本使用

引入

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

使用

1. 调用columnsHelper方法，返回配置实例，可以通过链式调用方法的方式来配置vxe-grid 的列配置
2. 最后将实例对象传递给 grid 构建工具useVxeGrid
3. 注意：每列配置完都需要最后调用end方法

const columns = columnsHelper();
columns.title('某一列').field('data1').width('80px').align('left', { headerAlign: 'center' }).end();

合并配置场景

实例提供一个merge方法，可以将其他列配置对象合并到当前实例，比如一些通用的列配置。

someCommonColumns.js

import { columnsHelper } from 'vxe-table-middleware';
const columns = columnsHelper();
columns.title('创建人').field('createUser').width('80px').end();
columns.title('创建时间').field('createTime').width('120px').end();
columns.title('更新人').field('updateUser').width('80px').end();
columns.title('更新时间').field('updateTime').width('120px').end();

export default columns; // 导出列配置实例

somePage.vue

<template>
  <vxe-grid-wrap ref="gridRef" :grid="grid" />
</template>
<script>
import { columnsHelper, useVxeGrid } from 'vxe-table-middleware';
import someCommonColumns from './someCommonColumns';
export default {
  data() {
    return { grid: null };
  },
  mounted() {
    this.initGrid();
  },
  methods: {
    initGrid() {
      const columns = columnsHelper();
      columns.type('checkbox').fixed('left');
      columns.field('name').title('名称').end();
      columns.field('age').title('年龄').end();
      columns.field('address').title('地址').end();
      // 合并公共列配置
      columns.merge(someCommonColumns);

      this.grid = useVxeGrid({ columns });
    },
  },
};
</script>

columnsHelper 实例方法

function merge(columnsHelperIns)

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

Parameters

• columnsHelperIns (object) - 列配置工具函数实例

function type(type)

列的类型

Parameters

• type (string) - 类型名称 'seq' | 'radio' | 'checkbox' | 'expand' | 'html'

Returns

• - this

function field(field)

列的字段名

Parameters

• field (string) - 标识值

Returns

• - this

function title(title)

列的标题

Parameters

• title (string) - 标题值

Returns

• - this

function width(width)

列宽度（如果为空则均匀分配剩余宽度，如果全部列固定了，可能会存在宽屏下不会铺满，可以配合 "%" 或者 "min-width" 布局）

Parameters

• width (string, number) - 宽度

Returns

• - this

function minWidth(minWidth)

最小列宽度；会自动将剩余空间按比例分配

Parameters

• minWidth (string, number) - 最小宽度

Returns

• - this

function resizable(resizable)

列是否允许拖动列宽调整大小

Parameters

• resizable (boolean) - 是否可调整大小

Returns

• - this

function visible(visible)

列是否显示

Parameters

• visible (boolean) - 是否显示

Returns

• - this

function fixed(fixed)

列是否固定

Parameters

• fixed (string) - 固定位置 'left' | 'right'

Returns

• - this

function align(align, extra)

列对其方式

Parameters

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

Returns

• - this

function showOverflow(showOverflow, extra)

当内容过长时显示为省略号

Parameters

• showOverflow (string, boolean) - 是否/如何(tooltip|ellipsis|title)显示溢出省略
• extra (object) - 单独配置showHeaderOverflow、showFooterOverflow

Returns

• - this

function className(className, extra)

给单元格附加 className

Parameters

• className (string, function) - 样式类名
• extra (object) - 单独配置headerClassName、footerClassName

Returns

• - this

function padding(hasPadding)

显示边距

Parameters

• hasPadding (boolean) - 是否显示边距

Returns

• - this

function verticalAlign(verticalAlign)

垂直对齐方式

Parameters

• verticalAlign (string) - 垂直对齐方式 'top' | 'center'

Returns

• - this

function formatter(formatter)

格式化显示内容

Parameters

• formatter (function, array, string) - 格式化处理参数

Returns

• - this

function sort(param, param.sortType, param.sortBy)

数据排序

Parameters

• param (object) - 排序配置
• param.sortType (string) - 排序的字段类型 auto | number | string
• param.sortBy (string, function) - 指定排序的字段（当值 formatter 格式化后，可以设置该字段，使用值进行排序）

Returns

• - this

function filters(filtersConf, multiple)

数据筛选，配置筛选条件（注：筛选只能用于列表，如果是树结构则过滤根节点）

Parameters

• filtersConf (array) - 筛选配置,{label:string;value:string;checked:boolean;resetValue:any;data:any;}[]
• multiple (boolean) - 是否多选

Returns

• - this

function filterMethod(filterMethod:)

列的筛选方法，该方法的返回值用来决定该行是否显示

Parameters

• filterMethod: (function) - ({ value, option, cellValue, row, column }) => boolean

Returns

• - this

function filterRender(name, renderOptions?:)

数据筛选，筛选渲染器配置项

Parameters

• name (string) - 渲染器名称
• renderOptions?: (object) - {props?:object; events":object; content?:string}

Returns

• - this

function filterResetMethod(filterResetMethod:)

自定义筛选重置方法

Parameters

• filterResetMethod: (function) - ({ options, column }) => void

Returns

• - this

function filterRecoverMethod(filterRecoverMethod:)

自定义筛选复原方法（使用自定义筛选时可能会用到）

Parameters

• filterRecoverMethod: (function) - ({ options, column }) => void

Returns

• - this

function titlePrefix(prefix:)

标题前缀图标配置项

Parameters

• prefix: (object) - {content?:string; icon?:string;}

Returns

• - this

function titleSuffix(suffix:)

标题后缀图标配置项

Parameters

• suffix: (object) - {content?:string; icon?:string;}

Returns

• - this

function cellRender(name, renderOptions)

默认的渲染器配置项

Parameters

• name (string) - 渲染器名称
• renderOptions (object) - 渲染器配置项

Returns

• - this

function editRender(name, renderOptions?)

可编辑渲染器配置项

Parameters

• name (string) - 渲染器名称
• renderOptions? (object) - 渲染器配置项

Returns

• - this

function contentRender(name, renderOptions?)

内容渲染器配置项

Parameters

• name (string) - 渲染器名称
• renderOptions? (object) - 渲染器配置项

Returns

• - this

function treeNode(isTreeNode)

指定为树节点，只对 tree-config 配置时有效

Parameters

• isTreeNode (boolean) - 默认值 false

Returns

• - this

function params(params)

额外的参数（可以用来存放一些私有参数）

Parameters

• params (object) - 额外的参数

Returns

• - this

function children(columnsIns)

子列配置

Parameters

• columnsIns (ColumnsHelperClass) - 子列配置实例

Returns

• - this

function slots(slots)

插槽配置

Parameters

• slots (object) - {[slotName:string]: string | function }

Returns

• - this

function end()

完成当前列的配置，开始下一列的配置

Returns

• - this