vben admin配置详解（Table, Form）

vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。

监听菜单折叠:

const { getCollapsed } = useMenuSetting();
  const isCollapsed = ref(false);
  watch(
    getCollapsed,
    (val) => {
      isCollapsed.value = val;
    },
    { immediate: true },
  );
1
2
3
4
5
6
7
8
9

获取当前语言类型

获取当前语言类型，然后做一些事情。比如设置不同的样式，调整UI。

import { useLocaleStoreWithOut } from '/@/store/modules/locale';
  // 获取当前语言
  const localeStore = useLocaleStoreWithOut();
  const locale = localeStore.getLocale;

  const localeClass = computed(() => {
    return locale === 'en' ? 'en-item mrb-15' : 'item mrb-15';
  });
1
2
3
4
5
6
7
8

或者这种

import { useLocale } from '/@/locales/useLocale';
  
  const { getAntdLocale } = useLocale();
  const locale = getAntdLocale.value.locale;
1
2
3
4

监听语言切换做UI处理
1

// 监听语言切换，修改ui
 
import { useLocaleStoreWithOut } from '/@/store/modules/locale';
// 获取当前语言
const localeStore = useLocaleStoreWithOut();
const locale = localeStore.getLocale;

export default function isEnLocale() {
  return locale === 'en';
}
1
2
3
4
5
6
7
8
9
10

权限设置

多个权限是或者的关系。

v-auth指令，指定唯一值。内部也是调用hasPermission去做判断的。不可以动态添加判断。
hasPermission动态添加去做判断。结合v-if, v-show做显示隐藏。

import { usePermission } from '/@/hooks/web/usePermission';
 const { hasPermission } = usePermission();
 
 if (!hasPermission(['xxx1', 'xxx2'])) {
      createMessage.info('暂无查看权限! ');
      return;
    }
1
2
3
4
5
6
7

开启页面缓存

链接

vben全局注册组件

input
layout
button-group
button (vben自己封装的) 组件名称a-button
preIcon，前置图标
postIcon后置图标 内部也提供默认插槽。

<a-button> <plus-outlined /> 新增 </a-button>
1

useTable返回的配置对象

// 设置加载loading
  setLoading,
  // 更改column.这里一般需要设置固定列时会用到. useAutoFixed. (默认index是默认固定的)
  // useAutoFixed('projectName', tableColumns, setColumns);
  // 设置表格列属性。
  setColumns,
  // 获取列属性。当前表格列配置的columns，并且增加一些默认值。
  getColumns,
  // 获取data数据。获取当前表格所有数据（不管是当前表格有没有展示）
  getDataSource,
  // 获取接口的原始数据。获取接口的返回值，返回啥格式就获取啥格式。
  getRawDataSource,
  // 重新出发接口请求.需要传递请求参数
  reload,
  // 获取分页信息
  getPaginationRef,
  // 设置页码 {count} 可以用于设置不使用分页的数据，我只想要设置总数据。用于dataSource，注意pageSize默认值是20。数据量超过20，就会自动分页，所以我们需要将pageSize设置大一点。
  setPagination,
  // 获取选中行列表。拿到当前选中的记录（所有的行数据），传递给后端。
  getSelectRows,
  // 获取选中行 rowKey。拿到所有的key就可以传递给后端做处理
  getSelectRowKeys,
  // 手动设置选中行
  setSelectedRowKeys,
  // 清空选中行
  clearSelectedRowKeys,
  // 设置表格参数。设置表格的任何配置
  setProps,
  // 重新计算表格高度 （暂时不知道有啥效果）
  redoHeight,
  // 设置表格数据 （这个可以用于设置给定dataSource更新数据）
  setTableData,
  // 根据 key 删除取消选中行。个人感觉没啥用。
  deleteSelectRowByKey,
  // 更新表格数据（单条数据单个值） 异步方法 (index: number, key: string, value: any) 指定哪个记录更新哪个字段值
  updateTableData,
  // 根据唯一的rowKey 动态删除指定行的数据.可用于不刷新整个表格而局部更新数据
  deleteTableDataRecord,
  // 可根据传入的 index 值决定插入数据行的位置，不传则是顺序插入，可用于不刷新整个表格而局部更新数据
  insertTableDataRecord,
  // 根据唯一的 rowKey 更新指定行的数据.可用于不刷新整个表格而局部更新数据
  updateTableDataRecord,
  // 获取勾选框信息 selectedRowKeys属性可以拿到选中行的key
  getRowSelection,
  // 如果开启了搜索区域。可以通过该函数获取表单对象函数进行操作
  getForm,
  // 设置是否显示分页
  setShowPagination,
  // 获取当前是否显示分页
  getShowPagination,
  // 展开树形表格
  expandAll,
  // 折叠树形表格
  collapseAll,
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

reload

参数类型

export interface FetchParams {
  searchInfo?: Recordable;
  page?: number;
  sortInfo?: Recordable;
  filterInfo?: Recordable;
}
1
2
3
4
5
6

searchInfo、filterInfo、sortInfo内容会被结构出来，放在同一层传递出去。目的是为了更好地区分吧。

updateTableData
(index: number, key: string, value: any)

更新表格数据（单条数据单个值） 异步方法指定哪个记录更新哪个字段值。

getForm
获取搜索区域对象，做一些操作比如表单校验。

BasicTableProps useTable 参数

export interface BasicTableProps<T = any> {
  // 是否可以点击行选中
  clickToRowSelect?: boolean;
  // 树形表格设置为true
  isTreeTable?: boolean;
  // 自定义排序方法
  sortFn?: (sortInfo: SorterResult) => any;
  // 自定义过滤方法（这个没用过）
  filterFn?: (data: Partial<Recordable<string[]>>) => any;
  // 取消表格的默认padding
  inset?: boolean;
  // 显示表格设置 (表头右侧区域操作栏)
  showTableSetting?: boolean;
  // 单独设置表格操作项
  tableSetting?: TableSetting;
  // 斑马纹
  striped?: boolean;
  // 是否自动生成key
  autoCreateKey?: boolean;
  // 计算合计行的方法
  summaryFunc?: (...arg: any) => Recordable[];
  // 自定义合计表格内容
  summaryData?: Recordable[];
  // 是否显示合计行
  showSummary?: boolean;
  // 是否可拖拽列
  canColDrag?: boolean;
  // 接口请求对象
  api?: (...arg: any) => Promise<any>;
  // 请求之前处理参数
  beforeFetch?: Fn;
  // 自定义处理接口返回参数
  afterFetch?: Fn;
  // 查询条件请求之前处理。这个是开启表单查询时生效
  handleSearchInfoFn?: Fn;
  // 接口请求配置，可以配置请求的字段和响应的字段名。
  fetchSetting?: Partial<FetchSetting>;
  // 立即请求接口
  immediate?: boolean;
  // 在开起搜索表单的时候，如果没有数据是否显示表格
  emptyDataIsShowTable?: boolean;
  // 额外的请求参数。该参数会合并到请求params
  searchInfo?: Recordable;
  // 默认的排序参数
  /**
   * {
        field: 'name',
        order: 'ascend',
      }
   */
  defSort?: Recordable;
  // 使用搜索表单
  useSearchForm?: boolean;
  // 表单配置
  formConfig?: Partial<FormProps>;
  // 列配置
  columns: BasicColumn[];
  // 是否显示序号列
  showIndexColumn?: boolean;
  // 序号列配置
  indexColumnProps?: BasicColumn;
  // 操作列配置
  /**
   * actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
    },
   */
  actionColumn?: BasicColumn;
  // 文本超过宽度是否显示省略号
  ellipsis?: boolean;
  // 是否可以自适应高度
  canResize?: boolean;
  // 自适应高度偏移， 计算结果-偏移量
  resizeHeightOffset?: number;

  // 切换页码是否重置勾选状态
  clearSelectOnPageChange?: boolean;
  // 设置主键属性 (好像没有效果)
  rowKey?: string | ((record: Recordable) => string);
  // 数据，不请求接口时，提供的数据列表
  dataSource?: Recordable[];
  // 标题右侧提示
  titleHelpMessage?: string | string[];
  // 表格最大高度，超出会显示滚动条
  maxHeight?: number;
  // 是否显示边框
  bordered?: boolean;
  // 分页配置
  pagination?: PaginationProps | boolean;
  // loading加载
  loading?: boolean;

  /**
   * The column contains children to display
   * @default 'children'
   * @type string | string[]
   */
  childrenColumnName?: string;

  /**
   * Override default table elements
   * @type object
   */
  components?: object;

  /**
   * Expand all rows initially
   * @default false
   * @type boolean
   */
  defaultExpandAllRows?: boolean;

  /**
   * Initial expanded row keys
   * @type string[]
   */
  defaultExpandedRowKeys?: string[];

  /**
   * Current expanded row keys
   * @type string[]
   */
  expandedRowKeys?: string[];

  /**
   * Expanded container render for each row
   * @type Function
   */
  expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element;

  /**
   * Customize row expand Icon.
   * @type Function | VNodeChild
   */
  expandIcon?: Function | VNodeChild | JSX.Element;

  /**
   * Whether to expand row by clicking anywhere in the whole row
   * @default false
   * @type boolean
   */
  expandRowByClick?: boolean;

  /**
   * The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0
   */
  expandIconColumnIndex?: number;

  /**
   * Table footer renderer
   * @type Function | VNodeChild
   */
  footer?: Function | VNodeChild | JSX.Element;

  /**
   * Indent size in pixels of tree data
   * @default 15
   * @type number
   */
  indentSize?: number;

  /**
   * i18n text including filter, sort, empty text, etc
   * @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' }
   * @type object
   */
  locale?: object;

  /**
   * Row's className
   * @type Function
   */
  rowClassName?: (record: TableCustomRecord<T>, index: number) => string;

  /**
   * Row selection config
   * @type object
   */
  rowSelection?: TableRowSelection;

  /**
   * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
   * It is recommended to set a number for x, if you want to set it to true,
   * you need to add style .ant-table td { white-space: nowrap; }.
   * @type object
   */
  scroll?: { x?: number | true; y?: number };

  /**
   * Whether to show table header
   * @default true
   * @type boolean
   */
  showHeader?: boolean;

  /**
   * Size of table
   * @default 'default'
   * @type string
   */
  size?: SizeType;

  /**
   * Table title renderer
   * @type Function | ScopedSlot
   */
  title?: VNodeChild | JSX.Element | string | ((data: Recordable) => string);

  /**
   * Set props on per header row
   * @type Function
   */
  customHeaderRow?: (column: ColumnProps, index: number) => object;

  /**
   * Set props on per row
   * @type Function
   */
  customRow?: (record: T, index: number) => object;

  /**
   * `table-layout` attribute of table element
   * `fixed` when header/columns are fixed, or using `column.ellipsis`
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
   * @version 1.5.0
   */
  tableLayout?: 'auto' | 'fixed' | string;

  /**
   * the render container of dropdowns in table
   * @param triggerNode
   * @version 1.5.0
   */
  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;

  /**
   * Data can be changed again before rendering.
   * The default configuration of general user empty data.
   * You can configured globally through [ConfigProvider](https://antdv.com/components/config-provider-cn/)
   *
   * @version 1.5.4
   */
  transformCellText?: Function;

  /**
   * Callback executed before editable cell submit value, not for row-editor
   *
   * The cell will not submit data while callback return false
   */
  beforeEditSubmit?: (data: {
    record: Recordable;
    index: number;
    key: string | number;
    value: any;
  }) => Promise<any>;

  /**
   * Callback executed when pagination, filters or sorter is changed
   * @param pagination
   * @param filters
   * @param sorter
   * @param currentDataSource
   */
  onChange?: (pagination: any, filters: any, sorter: any, extra: any) => void;

  /**
   * Callback executed when the row expand icon is clicked
   *
   * @param expanded
   * @param record
   */
  onExpand?: (expande: boolean, record: T) => void;

  /**
   * Callback executed when the expanded rows change
   * @param expandedRows
   */
  onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;

  onColumnsChange?: (data: ColumnChangeParam[]) => void;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284

sortFn 排序

export interface SorterResult {
  column: ColumnProps;
  order: SortOrder;
  field: string;
  columnKey: string;
}

// 参数可以拿到对应字段的一些内容
sortFn(sortInfo: SorterResult) {
  const sortMap = {
    inviteBidTime: 'invite_bid_time',
    openBidTime: 'open_bid_time',
  };

  const { order, columnKey } = sortInfo;
  return {
    field: sortMap[columnKey],
    order,
  };
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

单元格列属性还需要配置

sorter: true,
sortDirections: ['descend', 'ascend'],
1
2

tableSetting
单独设置表格操作项。在showTableSetting设置为true时生效。

export interface TableSetting {
  redo?: boolean;
  size?: boolean;
  setting?: boolean;
  fullScreen?: boolean;
}


showTableSetting: true,
tableSetting: {
  redo: true,
  setting: false,
},
1
2
3
4
5
6
7
8
9
10
11
12
13

api

defSort, sortFn, pageSize, page等等参会被作为请求参数。
/**
 *
 * 会将defSort， pageSize， page传入，作为默认值
 */
api: (params) => {
  console.log('============', params);
  return demoListApi(params);
},
1
2
3
4
5
6
7
8
9

beforeFetch 处理请求数据

// 处理请求数据
beforeFetch(params) {
  console.log('params', params);
},
1
2
3
4

afterFetch 处理响应数据

// 处理响应数据
afterFetch(params) {
  console.log('params====响应', params);
},
1
2
3
4

pagination 分页
可以用于设置不使用分页的数据，我只想要设置总数据。用于dataSource，注意pageSize默认值是20。数据量超过20，就会自动分页，所以我们需要将pageSize设置大一点。

export interface PaginationProps {
  /**
   * total number of data items
   * @default 0
   * @type number
   */
  total?: number;

  /**
   * default initial page number
   * @default 1
   * @type number
   */
  defaultCurrent?: number;

  /**
   * current page number
   * @type number
   */
  current?: number;

  /**
   * default number of data items per page
   * @default 10
   * @type number
   */
  defaultPageSize?: number;

  /**
   * number of data items per page
   * @type number
   */
  pageSize?: number;

  /**
   * Whether to hide pager on single page
   * @default false
   * @type boolean
   */
  hideOnSinglePage?: boolean;

  /**
   * determine whether pageSize can be changed
   * @default false
   * @type boolean
   */
  showSizeChanger?: boolean;

  /**
   * specify the sizeChanger options
   * @default ['10', '20', '30', '40']
   * @type string[]
   */
  pageSizeOptions?: string[];

  /**
   * determine whether you can jump to pages directly
   * @default false
   * @type boolean
   */
  showQuickJumper?: boolean | object;

  /**
   * to display the total number and range
   * @type Function
   */
  showTotal?: (total: number, range: [number, number]) => any;

  /**
   * specify the size of Pagination, can be set to small
   * @default ''
   * @type string
   */
  size?: string;

  /**
   * whether to setting simple mode
   * @type boolean
   */
  simple?: boolean;

  /**
   * to customize item innerHTML
   * @type Function
   */
  itemRender?: (props: PaginationRenderProps) => VNodeChild | JSX.Element;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

BasicColumn 列配置

export interface BasicColumn extends ColumnProps {
  children?: BasicColumn[];
  filters?: {
    text: string;
    value: string;
    children?:
      | unknown[]
      | (((props: Record<string, unknown>) => unknown[]) & (() => unknown[]) & (() => unknown[]));
  }[];

  // 当前列展示的类型
  flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
  customTitle?: VueNode;

  slots?: Recordable;

  // Whether to hide the column by default, it can be displayed in the column configuration
  // 隐藏列
  defaultHidden?: boolean;

  // Help text for table column header
  // 表头右侧移入的提示文字
  helpMessage?: string | string[];

  // 格式化,例如时间格式化。可以拿到当前单元格或者行的记录
  format?: CellFormat;

  // Editable
  // 是否开启单元格编辑
  edit?: boolean;
  // 是否开启行编辑
  editRow?: boolean;
  // 是否默认处于编辑状态
  editable?: boolean;
  // 编辑组件 。默认是input
  editComponent?: ComponentType;
  // 编辑是组件需要的props，例如ApiSelect组件需要options,所以就需要传递api参数，请求数据然后传递
  editComponentProps?: Recordable;
  // 编辑项的验证规则
  /**
   * {
        required: true,
        validator: async (rule, value) => {
          if (!value) {
            return Promise.reject('请输入xxx');
          }
          if (value && value.length > 100) {
            return Promise.reject('最大不能超过100个字');
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
   */
  editRule?: boolean | ((text: string, record: Recordable) => Promise<string>);
  // 对应单元格值枚举 没啥用
  editValueMap?: (value: any) => string;
  // 开启editRow后，依旧没有效果。
  onEditRow?: () => void;
  // 权限编码控制是否显示
  auth?: RoleEnum | RoleEnum[] | string | string[];
  // 业务控制是否显示。动态控制显隐
  ifShow?: boolean | ((column: BasicColumn) => boolean);
}

export interface ColumnProps<T> {
  /**
   * specify how content is aligned
   * @default 'left'
   * @type string
   */
  align?: 'left' | 'right' | 'center';

  /**
   * ellipsize cell content, not working with sorter and filters for now.
   * tableLayout would be fixed when ellipsis is true.
   * @default false
   * @type boolean
   */
  ellipsis?: boolean;

  /**
   * Span of this column's title
   * 表头合并
   * @type number
   */
  colSpan?: number;

  /**
   * Display field of the data record, could be set like a.b.c
   *
   * 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法
   *
   * @type string
   */
  dataIndex?: string;

  /**
   * Default filtered values
   * @type string[]
   */
  defaultFilteredValue?: string[];

  /**
   * Default order of sorted values: 'ascend' 'descend' null
   *
   * 默认排序规则
   *
   *  @type string
   */
  defaultSortOrder?: SortOrder;

  /**
   * Customized filter overlay
   * @type any (slot)
   */
  filterDropdown?:
    | VNodeChild
    | JSX.Element
    | ((props: FilterDropdownProps) => VNodeChild | JSX.Element);

  /**
   * Whether filterDropdown is visible
   * @type boolean
   */
  filterDropdownVisible?: boolean;

  /**
   * Whether the dataSource is filtered
   * @default false
   * @type boolean
   */
  filtered?: boolean;

  /**
   * Controlled filtered value, filter icon will highlight
   * @type string[]
   */
  filteredValue?: string[];

  /**
   * Customized filter icon
   * @default false
   * @type any
   */
  filterIcon?: boolean | VNodeChild | JSX.Element;

  /**
   * Whether multiple filters can be selected
   * @default true
   * @type boolean
   */
  filterMultiple?: boolean;

  /**
   * Filter menu config
   * @type object[]
   */
  filters?: ColumnFilterItem[];

  /**
   * Set column to be fixed: true(same as left) 'left' 'right'
   *
   * 列是否固定，可选 true(等效于 left) 'left' 'right'
   * @default false
   * @type boolean | string
   */
  fixed?: boolean | 'left' | 'right';

  /**
   * Unique key of this column, you can ignore this prop if you've set a unique dataIndex
   * vue绑定的key 如果已经设置了唯一的 dataIndex，可以忽略这个属性
   * @type string
   */
  key?: string;

  /**
   * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
   *
   * 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并
   *
   * @type Function | ScopedSlot
   */
  customRender?: CustomRenderFunction<T> | VNodeChild | JSX.Element;

  /**
   * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
   *
   * 开启排序
   * @type boolean | Function
   */
  sorter?: boolean | Function;

  /**
   * Order of sorted values: 'ascend' 'descend' false
   * @type boolean | string
   */
  sortOrder?: boolean | SortOrder;

  /**
   * supported sort way, could be 'ascend', 'descend'
   * @default ['ascend', 'descend']
   * @type string[]
   */
  sortDirections?: SortOrder[];

  /**
   * Title of this column
   * @type any (string | slot)
   */
  title?: VNodeChild | JSX.Element;

  /**
   * Width of this column
   * @type string | number
   */
  width?: string | number;

  /**
   * Set props on per cell
   * 设置单元格属性 格式化单元格数据(并不是，没啥效果)
   * @type Function
   */
  customCell?: (record: T, rowIndex: number) => object;

  /**
   * Set props on per header cell
   * 设置表头属性 外层设计的会覆盖customHeaderCell返回的
   * @type object
   */
  customHeaderCell?: (column: ColumnProps<T>) => object;

  /**
   * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
   * @type Function
   */
  onFilter?: (value: any, record: T) => boolean;

  /**
   * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx
   * @type Function
   */
  onFilterDropdownVisibleChange?: (visible: boolean) => void;

  /**
   * When using columns, you can setting this property to configure the properties that support the slot,
   * such as slots: { filterIcon: 'XXX'}
   * {
   *  title?: string;
      filterIcon?: string;
      filterDropdown?: string;
      customRender?: string;
      [key: string]: string | undefined;
   * }
   
   一般使用customRender设置插槽名称即可。
   * @type object
   */
  slots?: Recordable<string>;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260

format

可以拿到当前单元格和行的记录，做一些处理。
export type CellFormat =
  | string
  | ((text: string, record: Recordable, index: number) => string | number)
  | Map<string | number, any>;
  
// 格式化,例如时间格式化
format?: CellFormat;

format(text) {
  return text ? dayjs(text).format('YYYY-MM-DD') : '';
},
1
2
3
4
5
6
7
8
9
10
11
12

basicTable插槽

useForm返回的配置对象

// 主要是统一更改对应的表单props
  setProps,
  // 通过请求接口数据，来回显对应的数据。这里主要使用到表单编辑等
  setFieldsValue,
  // 更新schema,可以一次性更新多个schemaItem
  updateSchema,
  // 滚动到对应字段位置。暂时未发现有啥用
  scrollToField,
  // 他这个还是需要传入重置的schame,实际感觉可以使用updateSchame代替
  resetSchema,
  // 清空校验信息，包括表单的验证错误提示
  clearValidate,
  // 重置表单数据，包括验证错误提示也会消失
  resetFields,
  // 根据 field 删除 Schema
  removeSchemaByFiled,
  // 获取表单数据 （注意: 只会获取填写的字段，删除空值字段）
  getFieldsValue,
  // 插入到指定 filed 后面，如果没传指定 field，则插入到最后,当 first = true 时插入到第一个位置 （没啥用）
  appendSchemaByField,
  //  const res = await validateFields(['field1']); 指定对应的filed进行表单验证。如果不指定，name将验证所有表单项。如果传入一个空数组，那么表单校验将会被忽略。直接通过。
  validateFields,
  // 整体表单校验。测试发现和validateFields一样的效果
  validate,
  // 提交表单。内部集成了表单校验
  submit,
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

useForm 参数

export interface FormProps {
  // 表单展示方式
  layout?: 'vertical' | 'inline' | 'horizontal';
  // 表单绑定的数据对象
  model?: Recordable;
  // The width of all items in the entire form
  labelWidth?: number | string;
  //alignment
  labelAlign?: 'left' | 'right';
  //Row configuration for the entire form
  rowProps?: RowProps;
  // Submit form on reset
  // 重置时是否提交表单。触发表单对象的submit事件，如果绑定了submit事件。
  submitOnReset?: boolean;
  // label整体配置。column配置的内容会覆盖formProps中的配置
  labelCol?: Partial<ColEx>;
  // wrapper整体配置
  wrapperCol?: Partial<ColEx>;

  // General row style
  baseRowStyle?: CSSProperties;

  // 配置所有选子项的 ColProps，不需要逐个配置，子项也可单独配置优先与全局
  baseColProps?: Partial<ColEx>;

  // 表单项配置列表
  schemas?: FormSchema[];
  // 额外传递到子组件的参数 values
  mergeDynamicData?: Recordable;
  // 紧凑类型表单，减少 margin-bottom
  compact?: boolean;
  // 空白行格,可以是数值或者 col 对象 数
  emptySpan?: number | Partial<ColEx>;
  // 向颞部组件传递size值
  size?: 'default' | 'small' | 'large';
  // 禁用全部表单
  disabled?: boolean;
  // 用于将表单内时间区域的应设成 2 个字段 （用于时间区间选择，传递给后端开始和结束时间）
  /**
   * fieldMapToTime: [
    // datetime为时间组件在表单内的字段，startTime，endTime为转化后的开始时间与结束时间
    // 'YYYY-MM-DD'为时间格式，参考moment
    ['datetime', ['startTime', 'endTime'], 'YYYY-MM-DD'],
    // 支持多个字段
    ['datetime1', ['startTime1', 'endTime1'], 'YYYY-MM-DD HH:mm:ss'],
    提交后获取表单数据就会有startTime,endTime字段
  ],
   */
  fieldMapToTime?: FieldMapToTime;
  // 自动设置表单内组件的 placeholder，自定义组件需自行实现
  autoSetPlaceHolder?: boolean;
  // 在input中输入时按回车自动提交
  autoSubmitOnEnter?: boolean;
  // 如果表单项有校验，会自动生成校验信息，该参数控制是否将字段中文名字拼接到自动生成的信息后方
  rulesMessageJoinLabel?: boolean;
  // 是否显示收起展开按钮。 提交按钮旁边的
  showAdvancedButton?: boolean;
  // 是否聚焦第一个输入框，只在第一个表单项为 input 的时候作用
  autoFocusFirstItem?: boolean;
  // 如果 showAdvancedButton 为 true，超过指定行数行默认折叠
  autoAdvancedLine?: number;
  // 折叠时始终保持显示的行数
  alwaysShowLines?: number;
  // 是否显示操作按钮(重置/提交) 如果设置为false时，展开隐藏的表单项将不会显示
  showActionButtonGroup?: boolean;

  // 重置按钮的配置项 {text}
  resetButtonOptions?: Partial<ButtonProps>;

  // 确认按钮配置见下方
  submitButtonOptions?: Partial<ButtonProps>;

  // 操作（footer-action）按钮外层 Col 组件配置，如果开启 showAdvancedButton，则不用设置
  actionColOptions?: Partial<ColEx>;

  // 是否显示重置按钮
  showResetButton?: boolean;
  // 是否显示提交按钮
  showSubmitButton?: boolean;

  // 自定义重置按钮逻辑
  resetFunc?: () => Promise<void>;
  submitFunc?: () => Promise<void>;
  transformDateFunc?: (date: any) => string;
  colon?: boolean;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

labelCol

export interface ColEx {
  style?: any;
  /**
   * raster number of cells to occupy, 0 corresponds to display: none
   * @default none (0)
   * @type ColSpanType
   */
  span?: ColSpanType;

  /**
   * raster order, used in flex layout mode
   * @default 0
   * @type ColSpanType
   */
  order?: ColSpanType;

  /**
   * the layout fill of flex
   * @default none
   * @type ColSpanType
   */
  flex?: ColSpanType;

  /**
   * the number of cells to offset Col from the left
   * @default 0
   * @type ColSpanType
   */
  offset?: ColSpanType;

  /**
   * the number of cells that raster is moved to the right
   * @default 0
   * @type ColSpanType
   */
  push?: ColSpanType;

  /**
   * the number of cells that raster is moved to the left
   * @default 0
   * @type ColSpanType
   */
  pull?: ColSpanType;

  /**
   * <576px and also default setting, could be a span value or an object containing above props
   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
   */
  xs?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

  /**
   * ≥576px, could be a span value or an object containing above props
   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
   */
  sm?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

  /**
   * ≥768px, could be a span value or an object containing above props
   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
   */
  md?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

  /**
   * ≥992px, could be a span value or an object containing above props
   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
   */
  lg?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

  /**
   * ≥1200px, could be a span value or an object containing above props
   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
   */
  xl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

  /**
   * ≥1600px, could be a span value or an object containing above props
   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
   */
  xxl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

按钮相关操作
submitButtonOptions, submitFunc，如果有不需要提交和重置的功能，而是需要其他按钮的功能，我们就可以定义按钮文本并实现对应的逻辑。一个障眼法 也可以使用插槽。

// 重置按钮的配置项 {text}
  resetButtonOptions?: Partial<ButtonProps>;

  // 确认按钮配置
  submitButtonOptions?: Partial<ButtonProps>;

  // 操作（footer-action）按钮外层 Col 组件配置，如果开启 showAdvancedButton，则不用设置
  actionColOptions?: Partial<ColEx>;

  // 是否显示重置按钮
  showResetButton?: boolean;
  // 是否显示提交按钮
  showSubmitButton?: boolean;

  // 自定义重置按钮逻辑
  resetFunc?: () => Promise<void>;
  submitFunc?: () => Promise<void>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

插槽
ormFooter 表单底部区域
formHeader 表单顶部区域
resetBefore 重置按钮前
submitBefore 提交按钮前
advanceBefore 展开按钮前
advanceAfter 展开按钮后

表单项配置列表 SchemaForm

export interface FormSchema {
  // 表单项字段
  field: string;
  // 表单更新事件名称, 默认是change。 感觉没啥用
  changeEvent?: string;
  // 下拉数组项内value实际值的字段 默认是value
  // 一般使用在 componentProps 中请求options做字段值映射，还有 labelField
  /**
   * componentProps({ formModel }) {
      return {
        showSearch: true,
        api: queryCountryCode,
        labelField: 'cn',
        valueField: 'id',
        onChange: (_) => {
          formModel.province = null;
          // formModel.city = null;
        },
      };
    },
   */
  valueField?: string;
  // 表单项label名称
  label: string | VNode;
  // 二级标签名灰色
  subLabel?: string;
  // info提示信息
  helpMessage?:
    | string
    | string[]
    | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
  // 标签名右侧温馨提示组件 props
  helpComponentProps?: Partial<HelpComponentProps>;
  // 将覆盖统一设置的 labelWidth
  labelWidth?: string | number;
  // 禁用 form 全局设置的 labelWidth,自己手动设置 labelCol 和 wrapperCol。 （全局props不是没有labelWidth属性吗？？？）
  disabledLabelWidth?: boolean;
  // 渲染的组件类型
  component: ComponentType;
  // 所渲染组件的props
  /**
   * component: 'ApiSelect',
    componentProps(props) {
      return {
        showSearchcomponentProps: true,
        labelField: 'productName',
        valueField: 'productCode',
        resultField: 'results',

        api: (params) =>
          fetchProductPage(
            Object.assign(params, {
              pageReq: {
                pageSize: 500,
                pageNo: 1,
              },
            }),
          ),

        onChange(val, options) {
          // options是请求接口的原始数据
          props.formModel.productModel = options.productModel;
          props.formModel.productType = options.productType;
        },
      };
    },
   */
  componentProps?:
    | ((opt: {
        schema: FormSchema;
        tableAction: TableActionType;
        formActionType: FormActionType;
        formModel: Recordable;
      }) => Recordable)
    | object;
  // 必填
  required?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
  // 组件后面的内容
  suffix?: string | number | ((values: RenderCallbackParams) => string | number);

  // 表单项验证规则
  /**
   * rules: [
      {
        required: true,
        validator: async (rule, value) => {
          if (!value) {
            return Promise.reject('请输入xxx');
          }
          if (value && value.length > 100) {
            return Promise.reject('最大不能超过100个字');
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
    ],
   */
  rules?: Rule[];
  // 校验信息是否加入 label 默认是false
  rulesMessageJoinLabel?: boolean;

  // Reference formModelItem
  itemProps?: Partial<FormItem>;

  // col configuration outside formModelItem
  colProps?: Partial<ColEx>;

  // 默认值
  defaultValue?: any;
  isAdvanced?: boolean;

  // Matching details components
  span?: number;
  // 动态判断当前组件是否显示，js 控制，会删除 dom 相当于v-if
  ifShow?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
  // 动态判断当前组件是否显示，css 控制 (display: none)，不会删除 dom 相当于v-show
  show?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);

  // 自定义渲染内容 ，渲染组件在form-item中
  render?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;

  // 自定义渲染组件（需要自行包含 formItem）他的意思是渲染列组件。一个表单项，需要在外层包裹着formItem,因为他不会主动加上formItem
  renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;

  // 自定义渲染组内部的 slot (这个不知道啥用)
  renderComponentContent?:
    | ((renderCallbackParams: RenderCallbackParams) => any)
    | VNode
    | VNode[]
    | string;

  // 定义插槽名称，可以在basic-form中使用该插槽定制内容。可以拿到当前列props配置 Custom slot, in from-item
  slot?: string;

  // 相当于renderColContent， 但是他是在模板中使用插槽定义内容 Custom slot, similar to renderColContent
  colSlot?: string;
  // 是否禁用表单项
  dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
  // 动态判断当前组件校验规则
  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

ifShow
做一些表单值联动隐藏表单项处理。

ifShow(payload) {
    // 通过payload.model.[value]去判断
}

ifShow(payload) {
  if (payload.model.type === '1') {
    return true;
  } else {
    return false;
  }
},
1
2
3
4
5
6
7
8
9
10
11

componentProps 所渲染的组件的 props

1. 当值为对象类型时,该对象将作为component所对应组件的的 props 传入组件。就是ant-design-vue中组件对应的props。

2. 当值为一个函数时候参数是一个对象有 4 个属性。但是一般使用formModel, schema就可以了。做变动联动处理就可以使用到。
   schema: 表单的整个 schemas
   formActionType: 操作表单的函数。与 useForm 返回的操作函数一致
   formModel: 表单的双向绑定对象，这个值是响应式的。所以可以方便处理很多操作
   tableAction: 操作表格的函数，与 useTable 返回的操作函数一致。注意该参数只在表格内开启搜索表单的时候有值，其余情况为null。

component: 'ApiSelect',
componentProps(props) {
  return {
    showSearchcomponentProps: true,
    labelField: 'productName',
    valueField: 'productCode',
    resultField: 'results',

    api: (params) =>
      fetchProductPage(
        Object.assign(params, {
          pageReq: {
            pageSize: 500,
            pageNo: 1,
          },
        }),
      ),

    onChange(val, options) {
      // options是请求接口的原始数据
      props.formModel.productModel = options.productModel;
      props.formModel.productType = options.productType;
    },
  };
}
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