说明

提示

formItemsHelper是帮助构建表单项的工具。核心目的是实现form-config.items、form-config.data、form-config.rules三部分配置转化为函数编程方式，提供一定的 TS 类型提示，提高效率。
方法名基本与form-config.items配置属性名相同，少量的修改。

基本使用

引入

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

使用

1. 调用formItemsHelper方法，返回配置实例，可以通过链式调用方法的方式来配置vxe-grid的查询表单项的配置。
2. 最后将实例对象传递给 grid 构建工具useVxeGrid。

// ...
const formItems = formItemsHelper();
formItems.field('name', '').title('名称').itemRender('VxeInput').end();
formItems
  .field('status', '1')
  .resetValue('1')
  .title('状态')
  .itemRender('VxeSelect', {
    props: {
      options: [
        { label: '正常', value: '1' },
        { label: '禁用', value: '0' },
      ],
    },
  })
  .end();
formItems
  .itemRender('VxeButtonGroup', {
    options: [
      { type: 'submit', content: '搜索', status: 'primary' },
      { type: 'reset', content: '重置' },
    ],
  })
  .end();
// ...
this.grid = useVxeGrid({ formItems });

合并配置场景

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

以下是以复用查询表单按钮配置为例：

someFormItemsConfig.js

import { formItemsHelper } from 'vxe-table-middleware';
const formItems = formItemsHelper();
formItems
  .itemRender('VxeButtonGroup', {
    options: [
      { type: 'submit', content: '搜索', status: 'primary' },
      { type: 'reset', content: '重置' },
    ],
  })
  .end();
export default formItems;

somePage.vue

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

      // 配置表单
      const formItems = formItemsHelper();
      formItems.field('name', '').title('名称').itemRender('VxeInput').end();
      formItems
        .field('age', '')
        .title('年龄')
        .itemRender('VxeNumberInput', { props: { min: 0, digits: 0 } })
        .end();
      formItems.merge(someFormItemsConfig);

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

formItemsHelper 实例方法

function merge(formItemHelperIns)

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

Parameters

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

Returns

• - this

function field(field, defaultValue)

配置表单项字段

Parameters

• field (string) - 字段名
• defaultValue (any) - 默认值

Returns

• - this

function title(title)

标题（支持开启国际化）

Parameters

• title (string) - 标题

Returns

• - this

function span(span)

栅格占据的列数（共 24 分栏）

Parameters

• span (string, number) - 列数

Returns

• - this

function align(align)

内容对齐方式

Parameters

• align (string) - 对齐方式

Returns

• - this

function verticalAlign(verticalAlign)

垂直的对齐方式

Parameters

• verticalAlign (string) - 对齐方式，可选值 center

Returns

• - this

function titleBackground(titleBackground)

显示标题背景

Parameters

• titleBackground (boolean)

Returns

• - this

function titleAlign(titleAlign)

标题对齐方式

Parameters

• titleAlign (string)

Returns

• - this

function titleWidth(titleWidth)

标题宽度

Parameters

• titleWidth (string, number) - 宽度(auto,px,%)

Returns

• - this

function titleColon(titleColon)

是否显示标题冒号

Parameters

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

Returns

• - this

function titleAsterisk(titleAsterisk)

是否显示必填字段的红色星号

Parameters

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

Returns

• - this

function titleOverflow(titleOverflow)

标题内容过长时显示为省略号

Parameters

• titleOverflow (string, boolean) - 继承全局配置，可选值 ellipsis|title|tooltip

Returns

• - this

function showTitle(showTitle)

是否显示标题

Parameters

• showTitle (boolean) - 默认 true

Returns

• - this

function padding(padding)

显示边距

Parameters

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

Returns

• - this

function vertical(vertical)

使用垂直布局

Parameters

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

Returns

• - this

function className(className)

给表单项附加className

Parameters

• className (string, function) - 类名, string | (({ field, data }) => string)

Returns

• - this

function contentClassName(className)

给表单项内容附加className

Parameters

• className (string, function) - 类名, string | (({ field, data }) => string)

Returns

• - this

function contentStyle(style)

给表单项内容附加样式

Parameters

• style (object, function) - 样式对象，{ [name: string]: string } | (({ field, data }) => string)

Returns

• - this

function visible(visible)

默认是否显示

Parameters

• visible (boolean) - 是否显示，默认 true

Returns

• - this

function visibleMethod(method)

该方法的返回值用来决定该项是否显示

Parameters

• method (function) - 方法，({ data }) => boolean

Returns

• - this

function folding(folding)

默认收起

Parameters

• folding (boolean) - 是否折叠，默认值false

Returns

• - this

function collapseNode(collapseNode)

折叠节点

Parameters

• collapseNode (boolean) - 是否折叠，默认值false

Returns

• - this

function titlePrefix(config)

前缀配置项

Parameters

• config (object) - 配置项

Returns

• - this

function titleSuffix(config)

后缀配置项

Parameters

• config (object) - 配置项

Returns

• - this

function resetValue(resetValue)

重置时的默认值

Parameters

• resetValue (any) - 重置值，any | ((params: { item, field, data }) => any)，默认undefined

Returns

• - this

function formatter(formatter)

格式化显示内容

Parameters

• formatter (string, function) - 显示的内容，string | ((params: { itemValue, item, field, data }) => string)

Returns

• - this

function params(params)

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

Parameters

• params (any) - 参数

Returns

• - this

function itemRender(name, renderOptions?)

项渲染器配置项

Parameters

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

Returns

• - this

function slots(slots?)

插槽配置

Parameters

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

Returns

• - this

function rule(config)

校验规则配置项，如果有多个校验规则，需要配置多次调用该方法

Parameters

• config (object) - 校验规则

Returns

• - this

function end()

完成当前表单项的配置，开始下一项的配置