0
# Toolbar and Tools
1

2
Comprehensive toolbar component with built-in tools for common table operations including refresh, import/export, print, fullscreen, and custom column management.
3

4
## Capabilities
5

6
### VxeToolbar Component
7

8
Toolbar component with built-in tools and custom button support.
9

10
```typescript { .api }
11
/**
12
 * Toolbar component for table operations and tools
13
 */
14
interface VxeToolbar extends ComponentPublicInstance {
15
  // Loading state
16
  loading?: boolean;
17
  
18
  // Built-in tools
19
  refresh?: VxeToolbarPropTypes.Refresh;
20
  import?: VxeToolbarPropTypes.Import;
21
  export?: VxeToolbarPropTypes.Export;
22
  print?: VxeToolbarPropTypes.Print;
23
  zoom?: VxeToolbarPropTypes.Zoom;
24
  custom?: VxeToolbarPropTypes.Custom;
25
  
26
  // Custom elements
27
  buttons?: VxeToolbarPropTypes.Buttons;
28
  tools?: VxeToolbarPropTypes.Tools;
29
  
30
  // Configuration
31
  perfect?: boolean;
32
  size?: VxeToolbarPropTypes.Size;
33
  className?: string;
34
  
35
  // Component methods
36
  syncUpdate(params: { collectColumn: any[], $table: any }): void;
37
}
38
```
39

40
### Button Configuration
41

42
Custom button configuration for toolbar actions.
43

44
```typescript { .api }
45
interface ButtonConfiguration {
46
  /** Array of button configurations */
47
  buttons?: VxeToolbarPropTypes.Button[];
48
}
49

50
interface VxeToolbarPropTypes.Button {
51
  /** Button code/identifier */
52
  code?: string;
53
  /** Button name/label */
54
  name?: string;
55
  /** Button status */
56
  status?: string;
57
  /** Button type */
58
  type?: string;
59
  /** Icon name */
60
  icon?: string;
61
  /** Disabled state */
62
  disabled?: boolean;
63
  /** Loading state */
64
  loading?: boolean;
65
  /** Button size */
66
  size?: VxeToolbarPropTypes.Size;
67
  /** Placement position */
68
  placement?: 'top' | 'bottom';
69
  /** Dropdown options */
70
  dropdowns?: VxeToolbarPropTypes.Dropdown[];
71
  /** Visibility method */
72
  visible?: boolean;
73
  /** Visibility method function */
74
  visibleMethod?: (params: any) => boolean;
75
  /** Button properties */
76
  buttonRender?: VxeToolbarPropTypes.ButtonRender;
77
}
78

79
interface VxeToolbarPropTypes.Dropdown {
80
  /** Dropdown code */
81
  code?: string;
82
  /** Dropdown name */
83
  name?: string;
84
  /** Disabled state */
85
  disabled?: boolean;
86
  /** Visibility */
87
  visible?: boolean;
88
  /** Icon */
89
  icon?: string;
90
  /** Dropdown type */
91
  type?: string;
92
}
93

94
interface VxeToolbarPropTypes.ButtonRender {
95
  /** Renderer name */
96
  name?: string;
97
  /** Renderer properties */
98
  props?: any;
99
  /** Renderer events */
100
  events?: { [key: string]: Function };
101
}
102
```
103

104
### Tool Configuration
105

106
Built-in and custom tool configuration.
107

108
```typescript { .api }
109
interface ToolConfiguration {
110
  /** Array of tool configurations */
111
  tools?: VxeToolbarPropTypes.Tool[];
112
}
113

114
interface VxeToolbarPropTypes.Tool {
115
  /** Tool code/identifier */
116
  code?: string;
117
  /** Tool name */
118
  name?: string;
119
  /** Tool icon */
120
  icon?: string;
121
  /** Disabled state */
122
  disabled?: boolean;
123
  /** Loading state */
124
  loading?: boolean;
125
  /** Placement position */
126
  placement?: 'top' | 'bottom';
127
  /** Visibility */
128
  visible?: boolean;
129
  /** Tool renderer */
130
  toolRender?: VxeToolbarPropTypes.ToolRender;
131
}
132

133
interface VxeToolbarPropTypes.ToolRender {
134
  /** Renderer name */
135
  name?: string;
136
  /** Renderer properties */
137
  props?: any;
138
  /** Renderer events */
139
  events?: { [key: string]: Function };
140
}
141
```
142

143
### Refresh Tool
144

145
Refresh functionality configuration.
146

147
```typescript { .api }
148
interface RefreshConfiguration {
149
  /** Refresh tool configuration */
150
  refresh?: {
151
    /** Enable refresh tool */
152
    enabled?: boolean;
153
    /** Refresh icon */
154
    icon?: string;
155
    /** Loading icon */
156
    iconLoading?: string;
157
    /** Query method */
158
    query?: (params: any) => Promise<any>;
159
    /** Query parameters */
160
    queryParams?: any;
161
  };
162
}
163

164
// Refresh tool shorthand
165
type VxeToolbarPropTypes.Refresh = boolean | RefreshConfiguration['refresh'];
166
```
167

168
### Import/Export Tools
169

170
Data import and export functionality.
171

172
```typescript { .api }
173
interface ImportExportConfiguration {
174
  /** Import tool configuration */
175
  import?: {
176
    /** Enable import tool */
177
    enabled?: boolean;
178
    /** Import icon */
179
    icon?: string;
180
    /** Import types */
181
    types?: string[];
182
    /** Import modes */
183
    modes?: string[];
184
    /** Custom import method */
185
    importMethod?: (params: any) => void;
186
  };
187
  
188
  /** Export tool configuration */
189
  export?: {
190
    /** Enable export tool */
191
    enabled?: boolean;
192
    /** Export icon */
193
    icon?: string;
194
    /** Export types */
195
    types?: string[];
196
    /** Export modes */
197
    modes?: string[];
198
    /** Custom export method */
199
    exportMethod?: (params: any) => void;
200
  };
201
}
202

203
// Import/Export tool shorthand
204
type VxeToolbarPropTypes.Import = boolean | ImportExportConfiguration['import'];
205
type VxeToolbarPropTypes.Export = boolean | ImportExportConfiguration['export'];
206
```
207

208
### Print Tool
209

210
Print functionality configuration.
211

212
```typescript { .api }
213
interface PrintConfiguration {
214
  /** Print tool configuration */
215
  print?: {
216
    /** Enable print tool */
217
    enabled?: boolean;
218
    /** Print icon */
219
    icon?: string;
220
    /** Custom print method */
221
    printMethod?: (params: any) => void;
222
  };
223
}
224

225
// Print tool shorthand
226
type VxeToolbarPropTypes.Print = boolean | PrintConfiguration['print'];
227
```
228

229
### Zoom Tool
230

231
Fullscreen/zoom functionality configuration.
232

233
```typescript { .api }
234
interface ZoomConfiguration {
235
  /** Zoom tool configuration */
236
  zoom?: {
237
    /** Enable zoom tool */
238
    enabled?: boolean;
239
    /** Fullscreen icon */
240
    iconIn?: string;
241
    /** Minimize icon */
242
    iconOut?: string;
243
  };
244
}
245

246
// Zoom tool shorthand
247
type VxeToolbarPropTypes.Zoom = boolean | ZoomConfiguration['zoom'];
248
```
249

250
### Custom Column Tool
251

252
Custom column management tool configuration.
253

254
```typescript { .api }
255
interface CustomColumnConfiguration {
256
  /** Custom column tool configuration */
257
  custom?: {
258
    /** Enable custom tool */
259
    enabled?: boolean;
260
    /** Custom icon */
261
    icon?: string;
262
    /** Show footer */
263
    showFooter?: boolean;
264
    /** Trigger method */
265
    trigger?: 'manual' | 'click' | 'hover';
266
    /** Immediate effect */
267
    immediate?: boolean;
268
    /** Storage enabled */
269
    storage?: boolean;
270
    /** Check method for column customization */
271
    checkMethod?: (params: any) => boolean;
272
    /** Visible method */
273
    visibleMethod?: (params: any) => boolean;
274
    /** Allow visible toggle */
275
    allowVisible?: boolean;
276
    /** Allow resizable toggle */
277
    allowResizable?: boolean;
278
    /** Allow fixed toggle */
279
    allowFixed?: boolean;
280
    /** Allow sort toggle */
281
    allowSort?: boolean;
282
  };
283
}
284

285
// Custom tool shorthand
286
type VxeToolbarPropTypes.Custom = boolean | CustomColumnConfiguration['custom'];
287
```
288

289
**Usage Examples:**
290

291
```typescript
292
// Basic toolbar with built-in tools
293
<VxeToolbar
294
  refresh
295
  export
296
  zoom
297
  custom
298
  :buttons="toolbarButtons"
299
>
300
</VxeToolbar>
301

302
// Toolbar button configuration
303
const toolbarButtons = [
304
  { code: 'add', name: 'Add Record', icon: 'vxe-icon-add' },
305
  { code: 'edit', name: 'Edit', icon: 'vxe-icon-edit' },
306
  { code: 'delete', name: 'Delete', icon: 'vxe-icon-delete', type: 'danger' },
307
  { 
308
    code: 'more', 
309
    name: 'More Actions',
310
    dropdowns: [
311
      { code: 'batch-edit', name: 'Batch Edit' },
312
      { code: 'batch-delete', name: 'Batch Delete' }
313
    ]
314
  }
315
];
316

317
// Advanced toolbar configuration
318
<VxeToolbar
319
  :refresh="{ query: handleRefresh }"
320
  :export="{ types: ['csv', 'xlsx'], modes: ['current', 'selected'] }"
321
  :import="{ types: ['csv', 'xlsx'] }"
322
  :print="{ enabled: true }"
323
  :custom="{ storage: true, allowVisible: true, allowResizable: true }"
324
  :buttons="toolbarButtons"
325
  @button-click="handleButtonClick"
326
  @tool-click="handleToolClick"
327
>
328
</VxeToolbar>
329

330
// Grid with integrated toolbar
331
<VxeGrid
332
  :toolbar-config="{
333
    buttons: [
334
      { code: 'add', name: 'New' },
335
      { code: 'delete', name: 'Delete' }
336
    ],
337
    tools: ['refresh', 'export', 'custom']
338
  }"
339
  @toolbar-button-click="handleToolbarButton"
340
>
341
</VxeGrid>
342

343
// Custom tool configuration
344
const customToolConfig = {
345
  enabled: true,
346
  storage: true,
347
  checkMethod: ({ column }) => {
348
    // Allow customization for all columns except certain system columns
349
    return !['seq', 'checkbox', 'radio'].includes(column.type);
350
  },
351
  allowVisible: true,
352
  allowResizable: true,
353
  allowFixed: true,
354
  allowSort: true
355
};
356

357
// Event handlers
358
const handleButtonClick = ({ code }) => {
359
  switch (code) {
360
    case 'add':
361
      // Handle add action
362
      break;
363
    case 'edit':
364
      // Handle edit action
365
      break;
366
    case 'delete':
367
      // Handle delete action
368
      break;
369
  }
370
};
371

372
const handleToolClick = ({ code }) => {
373
  switch (code) {
374
    case 'refresh':
375
      // Custom refresh logic
376
      break;
377
    case 'export':
378
      // Custom export logic
379
      break;
380
  }
381
};
382

383
// Programmatic toolbar operations
384
const toolbarRef = ref<VxeToolbarInstance>();
385

386
// Update toolbar state
387
toolbarRef.value?.syncUpdate({
388
  collectColumn: visibleColumns,
389
  $table: tableRef.value
390
});
391
```
392

393
## Types
394

395
```typescript { .api }
396
// Toolbar size type
397
type VxeToolbarPropTypes.Size = 'mini' | 'small' | 'medium' | 'large';
398

399
// Toolbar instance type
400
interface VxeToolbarInstance extends ComponentPublicInstance, VxeToolbar {}
401

402
// Toolbar events
403
interface VxeToolbarEmits {
404
  'button-click': (params: VxeToolbarDefines.ButtonClickEventParams) => void;
405
  'tool-click': (params: VxeToolbarDefines.ToolClickEventParams) => void;
406
}
407

408
// Event parameter types
409
interface VxeToolbarDefines.ButtonClickEventParams {
410
  code: string;
411
  button: VxeToolbarPropTypes.Button;
412
  $event: Event;
413
}
414

415
interface VxeToolbarDefines.ToolClickEventParams {
416
  code: string;
417
  tool: VxeToolbarPropTypes.Tool;
418
  $event: Event;
419
}
420

421
// Button and tool arrays
422
type VxeToolbarPropTypes.Buttons = VxeToolbarPropTypes.Button[];
423
type VxeToolbarPropTypes.Tools = (string | VxeToolbarPropTypes.Tool)[];
424

425
// Built-in tool codes
426
type VxeToolbarBuiltInTools = 
427
  | 'refresh' 
428
  | 'import' 
429
  | 'export' 
430
  | 'print' 
431
  | 'zoom' 
432
  | 'custom';
433
```