VXE-Table

https://github.com/x-extends/vxe-table
Admin
Vxe Table is a PC-side table component based on Vxe UI, supporting copy-paste, pivot tables, and...
Tokens:75,777
Snippets:395
Trust Score:8.8
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Start local development server

Source: https://github.com/x-extends/vxe-table/blob/main/README.zh-TW.md

Start the local development server for debugging.

```shell
npm run serve
```

--------------------------------

### Basic vxe-table usage with template and script

Source: https://github.com/x-extends/vxe-table/blob/main/README.md

Shows a minimal vxe-table setup with columns and a colgroup, including sample data. Use this as a starting point for integrating vxe-table into a Vue component.

```html
<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="role" title="Role"></vxe-column>
      <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>
```

--------------------------------

### Mixed Usage Example Methods

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Example methods for tree tables, checkbox selection, and scrolling.

```APIDOC
## loadTreeChildren(row, children)

### Description
Loads child rows for a tree table node (lazy loading).

### Method
loadTreeChildren

### Parameters
- **row** (Object) - Required - The parent row object.
- **children** (Array) - Required - The child rows to load.

### Returns
- void
```

```APIDOC
## setAllTreeExpand(expanded)

### Description
Expands or collapses all tree nodes.

### Method
setAllTreeExpand

### Parameters
- **expanded** (Boolean) - Required - True to expand all, false to collapse all.

### Returns
- void
```

```APIDOC
## getCheckboxRecords()

### Description
Returns all currently selected checkbox rows.

### Method
getCheckboxRecords

### Parameters
None

### Returns
- Array - The selected rows.
```

```APIDOC
## removeCheckboxRow()

### Description
Deletes the selected checkbox rows. Returns a Promise.

### Method
removeCheckboxRow

### Parameters
None

### Returns
- Promise - Resolves when the rows are removed.
```

```APIDOC
## refreshScroll()

### Description
Refreshes the scroll position.

### Method
refreshScroll

### Parameters
None

### Returns
- void
```

```APIDOC
## scrollTo(scrollLeft, scrollTop)

### Description
Manually scrolls the table to the specified position.

### Method
scrollTo

### Parameters
- **scrollLeft** (Number) - Required - The horizontal scroll position.
- **scrollTop** (Number) - Required - The vertical scroll position.

### Returns
- void
```

--------------------------------

### 组件注册入口 packages/components.ts

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/index.md

定义组件列表与 install 函数，注册全局配置、语言与主题。

```ts
import { App } from 'vue'
import { VxeUI } from './ui'
import { VxeColumn } from './column'
import { VxeColgroup } from './colgroup'
import { VxeGrid } from './grid'
import { VxeTable } from './table'
import { VxeToolbar } from './toolbar'
import zhCN from './locale/lang/zh-CN'

const components = [VxeColumn, VxeColgroup, VxeGrid, VxeTable, VxeToolbar]

// 默认安装
export function install (app: App, options?: VxeGlobalConfig) {
  VxeUI.setConfig(options)
  components.forEach(component => component.install(app))
}

// 保留兼容老版本
if (!VxeUI.hasLanguage('zh-CN')) {
  const defaultLanguage = 'zh-CN'
  VxeUI.setI18n(defaultLanguage, zhCN)
  VxeUI.setLanguage(defaultLanguage)
}
VxeUI.setTheme('light')

export * from './ui'
export * from './table'
export * from './column'
export * from './colgroup'
export * from './grid'
export * from './toolbar'
```

--------------------------------

### install(app, options?)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/index.md

全局安装 vxe-table 组件库，将五个组件注册到 Vue 应用实例中。通过 app.use(VxeUITable, options) 调用，options 会透传给 VxeUI.setConfig。

```APIDOC
## install(app, options?)

### Description
全局安装 vxe-table 组件库，将 VxeTable、VxeGrid、VxeToolbar、VxeColumn、VxeColgroup 五个组件注册到 Vue 应用实例中。

### Method
install

### Parameters
#### Parameters
- **app** (App) - Required - Vue 应用实例
- **options** (VxeGlobalConfig) - Optional - 全局配置，传给 VxeUI.setConfig(options)

### Request Example
```ts
import { createApp } from 'vue'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'

createApp(App)
  .use(VxeUITable, { table: { stripe: true } }) // options 会透传 VxeUI.setConfig
  .mount('#app')
```

### Response
#### Success Response
- **void** - 无返回值

#### Response Example
无
```

--------------------------------

### 遍历 hooks 并执行 setupTable 合并模块方法

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/modules.md

在 packages/table/src/table.ts 的 setup 阶段，遍历所有模块 hook，执行 setupTable 并将返回的对象合并进 $xeTable。若返回对象非对象则忽略。

```typescript
hooks.forEach((options) => {
  const { setupTable } = options
  if (setupTable) {
    const hookRest = setupTable($xeTable)
    if (hookRest && XEUtils.isObject(hookRest)) {
      Object.assign($xeTable, hookRest)   // 模块方法合并进 $xeTable
    }
  }
})
```

--------------------------------

### Mixed Usage Example

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Example combining tree lazy loading, expanding all, getting checked rows, removing checked rows, and scrolling. Demonstrates common table operations in sequence.

```ts
// 树表：懒加载子级
const loadChild = async (row) => {
  const children = await fetchChildren(row.id)
  $table.loadTreeChildren(row, children)
}
// 展开全部树
$table.setAllTreeExpand(true)
// 获取当前所有已选中的 checkbox 行
const checked = $table.getCheckboxRecords()
// 删除选中行（编辑模块方法）
$table.removeCheckboxRow().then(() => $table.refreshScroll())
// 手动触发滚动位置
$table.scrollTo(0, 240)
```

--------------------------------

### Install vxe-table via NPM

Source: https://github.com/x-extends/vxe-table/blob/main/README.zh-TW.md

Install the vxe-table package using npm. This installs the latest version for Vue 3.x.

```shell
npm install vxe-table@next
```

--------------------------------

### Manual Sort and Clear Sort Example

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Shows how to manually trigger sorting by field and order, and how to clear sorting for a specific column. The example uses $table.sort with an array of sort configurations and $table.clearSort with a field name.

```ts
// 示例：手动排序
$table.sort([{ field: 'age', order: 'desc' }])
// 示例：手动清空某列排序
$table.clearSort('age')
```

--------------------------------

### TypeScript: Using vxe-table types in user code

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/types.md

Shows how to import and use vxe-table types (TableMethods, VxeTableEvents, VxeTableConstructor, VxeTablePropTypes) in user code. The example declares a table reference and a cell click handler with inferred event parameters. Requires vxe-pc-ui installed at the same or higher compatible version because types/ re-exports vxe-pc-ui.

```typescript
import { type TableMethods, type VxeTableEvents } from 'vxe-table'
import { type VxeTableConstructor, type VxeTablePropTypes } from 'vxe-table/types'

const $table: VxeTableConstructor = tableRef

// 事件参数推导
const onCellClick = (params: VxeTableEvents.CellClickParams) => {
  const { row, column, $table } = params
}
```

--------------------------------

### VxeToolbar 组件定义 (TypeScript)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-toolbar.md

定义 VxeToolbar 组件的名称、属性、事件和 setup 函数。

```ts
export default defineVxeComponent({
  name: 'VxeToolbar',
  props: { loading, refresh, refreshOptions, import, importOptions, export, exportOptions,
           print, printOptions, zoom, zoomOptions, custom, customOptions,
           buttons, tools, perfect, size, className },
  emits: ['button-click', 'tool-click'],
  setup (props, context) { ...; return $xeToolbar }
})
```

--------------------------------

### VxeGrid 组件定义 (defineVxeComponent)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-grid.md

VxeGrid 组件的主体定义，使用 defineVxeComponent 创建，包含 props、emits 和 setup 函数。

```ts
export default defineVxeComponent({
  name: 'VxeGrid',
  props: gridProps,
  emits: gridEmits,
  setup (props, context) { ...; return $xeGrid },
  render () { return this.renderVN() }
})
```

--------------------------------

### Build library for production

Source: https://github.com/x-extends/vxe-table/blob/main/README.zh-TW.md

Compile and package the library, generating the es and lib directories.

```shell
npm run lib
```

--------------------------------

### VxeTable 组件定义（defineVxeComponent）

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table.md

使用 defineVxeComponent 定义 VxeTable 组件，包含 name、props、emits、setup 和 render 选项。setup 返回 $xeTable 实例，render 调用 renderVN 方法。

```typescript
export default defineVxeComponent({
  name: 'VxeTable',
  props: tableProps,
  emits: tableEmits,
  setup (props, context) { ...; return $xeTable },
  render () { return this.renderVN() }
})
```

--------------------------------

### types/all.d.ts 全局声明与再导出

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/types.md

包含全局 window.VxeUITable / window.VXETable 声明、已废弃的 VXETable 常量与 VXETableCore 类型别名、install 函数签名，以及通过 declare module 注入全局组件类型；随后再导出 vxe-pc-ui 的类型。

```ts
export * from 'vxe-pc-ui/types/ui'
export * from 'vxe-pc-ui/types/components/column'
export * from 'vxe-pc-ui/types/components/colgroup'
export * from 'vxe-pc-ui/types/components/table'
export * from 'vxe-pc-ui/types/components/grid'
export * from 'vxe-pc-ui/types/components/toolbar'
```

--------------------------------

### Validation error handling example

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-edit.md

Example of calling validate with a callback to handle validation errors. The errMap contains field-keyed error objects with row, column, and content properties.

```TypeScript
// 示例：校验后错误处理
$table.validate(rows, (errMap) => {
  if (errMap) {
    // errMap 为 { [field]: { row, column, content } }，可将错误信息展示在页面
  }
})
```

--------------------------------

### Undo and Custom Store Usage Example

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Example of undoing after an edit and restoring custom-config data from localStorage. The getCustomStoreData method retrieves data previously saved via custom-config storeOptions.

```ts
// 示例：编辑后执行撤销
$table.undo()

// 示例：为 custom-config 持久化恢复
const storeData = $table.getCustomStoreData()   // 之前经 custom-config storeOptions 保存
if (storeData) {
  $table.setCustomStoreData(JSON.parse(localStorage.getItem('my-table-custom')))
}
```

--------------------------------

### Call table methods on grid reference

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-edit.md

Shows how to call table methods directly on a grid reference after setupGrid forwards them via extendTableMethods. The methods commitProxy, exportData, and validate are available on $xeGrid and forwarded to the internal $xeTable.

```ts
// 示例：grid 中直接调用
gridRef.commitProxy('save')
gridRef.exportData({ type: 'xlsx', modes: ['current'] })
gridRef.validate(rows)
```

--------------------------------

### Update dependencies

Source: https://github.com/x-extends/vxe-table/blob/main/README.zh-TW.md

Install or update project dependencies using npm.

```shell
npm run update
```

--------------------------------

### 创建全局日志观察器

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/errors.md

使用 VxeUI.log.create 创建日志观察器，可在运行时观察日志。具体 API 以 vxe-pc-ui 为准。

```ts
import { VxeUI } from 'vxe-table'
const logger = VxeUI.log.create('warn', 'app') // 与库同级别观察
```

--------------------------------

### 使用 app.use 安装 vxe-table

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/index.md

通过 createApp 创建应用，使用 VxeUITable 插件并传入全局配置，options 会透传 VxeUI.setConfig。

```ts
import { createApp } from 'vue'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'

createApp(App)
  .use(VxeUITable, { table: { stripe: true } }) // options 会透传 VxeUI.setConfig
  .mount('#app')
```

--------------------------------

### 导出 VxeTable 并注册到 VxeUI

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/index.md

从 packages/table/index.ts 导出 VxeTable，同时导出别名 Table。注册组件到 VxeUI，并挂载 tableHandle.useCellView 供外部调用。若存在 VxeUI.dynamicApp（微前端场景），组件还会注册到动态应用中。

```ts
export const VxeTable = Object.assign({}, VxeTableComponent, {
  install (app: App) {
    app.component(VxeTableComponent.name as string, VxeTableComponent)
  }
})
const tableHandle: TableHandleExport = { useCellView }
VxeUI.component(VxeTableComponent)
VxeUI.tableHandle = tableHandle
export const Table = VxeTable
export default VxeTable
```

--------------------------------

### getRowGroups () / getRowGroupFields ()

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Gets the current row grouping configuration and the fields used for grouping.

```APIDOC
## getRowGroups () / getRowGroupFields ()

### Description
Gets the current row grouping configuration and the fields used for grouping.

### Method
getRowGroups / getRowGroupFields

### Parameters
None

### Returns
- **getRowGroups**: Array - The row group configuration.
- **getRowGroupFields**: Array - The fields used for grouping.

```

--------------------------------

### types/index.d.ts 再导出入口

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/types.md

类型入口文件，将 vxe-pc-ui 的类型通过 ./all 再导出，并作为默认导出。

```ts
import * as VxeUITable from './all'
export * from './all'
export default VxeUITable
```

--------------------------------

### getAggregateContentByRow (row) / getAggregateRowChildren (row)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Gets the aggregate content for a row and the children of an aggregate row.

```APIDOC
## getAggregateContentByRow (row) / getAggregateRowChildren (row)

### Description
Gets the aggregate content for a row and the children of an aggregate row.

### Method
getAggregateContentByRow / getAggregateRowChildren

### Parameters
- **row** (Object) - Required - The row data object.

### Returns
- **getAggregateContentByRow**: any - The aggregate content.
- **getAggregateRowChildren**: Array - The children rows.

```

--------------------------------

### Using VxeNumberInput, VxeDatePicker, and select renderers in column configuration

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/renderers.md

Shows how to configure edit-render and cell-render for columns using VxeNumberInput with amount type, VxeDatePicker with valueFormat, and native select with options.

```html
<VxeColumn field="age" :edit-render="{ name: 'VxeNumberInput', props: { type: 'amount' } }" />
<VxeColumn field="date" :cell-render="{ name: 'VxeDatePicker', props: { valueFormat: 'yyyy-MM-dd' } }" />
<VxeColumn field="sex" :edit-render="{ name: 'select', options: [{ label: '男', value: '1' }] }" />
```

--------------------------------

### VxeUI.commands.add(name, command)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-ui.md

注册全局指令。

```APIDOC
## VxeUI.commands.add(name, command)

### Description
注册全局指令。

### Method
Function

### Signature
`(name: string, command: { commandMethod: (params: any) => void }) => ...`

### Parameters
- **name** (string) - Required - 指令名称。
- **command** (object) - Required - 指令对象。
  - **commandMethod** (function) - Required - 指令执行方法，接收 `{ $table, params }`。

### Example
```ts
import { VxeUI } from 'vxe-table'
VxeUI.commands.add('my-command', {
  commandMethod ({ $table, params }) {
    $table.syncData()
  }
})
```
```

--------------------------------

### Current Row/Column Methods

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Methods to get and set the current column and current row in the table.

```APIDOC
## Current Row/Column Methods

### Description
These methods allow you to manage the current column and current row state of the table.

### Methods

- **getCurrentColumn ()** - Returns the current column object.
- **setCurrentColumn (fieldOrColumn)** - Sets the current column by field name or column object.
- **clearCurrentColumn ()** - Clears the current column.
- **getCurrentRecord (isFull)** - Returns the current row record. `isFull` indicates whether to include all records.
- **setCurrentRow (row)** - Sets the current row.
- **clearCurrentRow ()** - Clears the current row.
```

--------------------------------

### 基础方法：getEl、clearAll、syncData、updateData、getParams

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table.md

基础方法用于获取根元素、重置数据状态、同步/更新数据以及获取参数。syncData 已废弃，应改用 getData。

```ts
getEl ()                                  // → HTMLDivElement | undefined，根元素
clearAll ()                               // → Promise，重置一切数据状态
syncData ()                               // 废弃，改用 getData
updateData ()                             // → Promise，手动重排数据（排序/筛选后）
getParams ()                              // → props.params
```

--------------------------------

### getPageSize() / setPageSize(pageSize) / setPageSizeByEvent(evnt, pageSize)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-grid.md

Get and set the page size, with an event variant.

```APIDOC
## getPageSize() / setPageSize(pageSize) / setPageSizeByEvent(evnt, pageSize)

### Description
Get and set the page size, with an event variant.

### Method
N/A (SDK methods)

### Endpoint
N/A

### Parameters
- **pageSize** (number) - Required for setPageSize and setPageSizeByEvent - The page size.
- **evnt** (Event) - Required for setPageSizeByEvent - The event object.

### Return Value
- **getPageSize()** - number
- **setPageSize(pageSize)** - void
- **setPageSizeByEvent(evnt, pageSize)** - void

### Example
```js
grid.getPageSize()
grid.setPageSize(20)
grid.setPageSizeByEvent(event, 20)
```
```

--------------------------------

### proxy-config 配置选项类型定义

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-grid.md

展示 proxy-config 的完整配置结构，包含 enabled、autoLoad、showLoading、showResponseMsg、showActionMsg、form、message、response 字段映射以及 ajax 回调函数。其中 query 为必填，缺省时抛出 errLog('vxe.error.notFunc')；queryAll 提供时导出 modes 包含 'all'。

```ts
{
  enabled: true,
  autoLoad: true,          // 初始化时自动执行 initial 查询
  showLoading: true,       // 查询期间表格 loading
  showResponseMsg: true,   // 成功后提示
  showActionMsg: true,     // 删除/保存动作提示
  form: true,              // 表单数据参与提交
  message: false,          // 覆盖 showResponseMsg
  response: {              // 响应字段映射（字符路径或函数）
    list: 'list', result: 'result', total: 'page.total',
    footerData: 'footerData', message: 'message'
  },
  ajax: {
    query: (body) => Promise<any>,          // 查询（必填，缺省 errLog('vxe.error.notFunc')）
    queryAll: (body) => Promise<any>,       // 全量数据（提供时导出 modes 含 'all'）
    queryFooter: () => Promise<any>,        // 表尾查询
    delete: (body) => Promise<any>,         // 删除提交
    save: (body) => Promise<any>,           // 保存提交
    beforeQuery, afterQuery, beforeQueryFooter, afterQueryFooter,
    beforeDelete, afterDelete, beforeSave, afterSave,
    querySuccess, queryError, deleteSuccess, deleteError, saveSuccess, saveError
  }
}
```

--------------------------------

### getTreeRowChildren (rowOrRowid) / getTreeRowLevel (rowOrRowid) / getTreeParentRow (rowOrRowid)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Gets the children, level, or parent row of a tree node.

```APIDOC
## getTreeRowChildren (rowOrRowid) / getTreeRowLevel (rowOrRowid) / getTreeParentRow (rowOrRowid)

### Description
Gets the children, level, or parent row of a tree node.

### Method
getTreeRowChildren / getTreeRowLevel / getTreeParentRow

### Parameters
- **rowOrRowid** (Object | string) - Required - The row object or row id.

### Returns
- **getTreeRowChildren**: Array - The children rows.
- **getTreeRowLevel**: number - The level of the node.
- **getTreeParentRow**: Object - The parent row.

```

--------------------------------

### getCurrentPage() / setCurrentPage(currentPage) / setCurrentPageByEvent(evnt, currentPage)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-grid.md

Get and set the current page number, with an event variant.

```APIDOC
## getCurrentPage() / setCurrentPage(currentPage) / setCurrentPageByEvent(evnt, currentPage)

### Description
Get and set the current page number, with an event variant.

### Method
N/A (SDK methods)

### Endpoint
N/A

### Parameters
- **currentPage** (number) - Required for setCurrentPage and setCurrentPageByEvent - The page number.
- **evnt** (Event) - Required for setCurrentPageByEvent - The event object.

### Return Value
- **getCurrentPage()** - number
- **setCurrentPage(currentPage)** - void
- **setCurrentPageByEvent(evnt, currentPage)** - void

### Example
```js
grid.getCurrentPage()
grid.setCurrentPage(2)
grid.setCurrentPageByEvent(event, 2)
```
```

--------------------------------

### 旧版兼容入口 packages/v-x-e-table

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/index.md

为老版本 import VXETable from 'vxe-table/v-x-e-table' 保留的兼容入口，仅重新导出 VxeUI，不包含组件。packages/v-x-e-table/index.d.ts 内容相同。

```ts
// packages/v-x-e-table/index.ts
import VxeUI from '../ui'
export * from '../ui'
export default VxeUI
```

--------------------------------

### getConfig()

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-ui.md

读取全局配置。

```APIDOC
## getConfig()

### Description
读取全局配置。

### Method
Function

### Signature
`() => VxeGlobalConfig`

### Returns
- **VxeGlobalConfig** - 全局配置对象。

### Example
```ts
import { VxeUI } from 'vxe-table'
const config = VxeUI.getConfig()
```
```

--------------------------------

### toolbar.* 默认配置

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/configuration.md

vxe-table 工具栏的全局默认配置，包含导入导出类型和按钮列表。

```ts
{ size: null, import: { mode: 'covering' }, export: { types: ['csv', 'html', 'xml', 'txt'] }, buttons: [] }
```

--------------------------------

### VxeToolbar 独立使用和关联表格 (HTML)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-toolbar.md

展示 VxeToolbar 独立使用和通过 toolbar-config 关联 VxeGrid 的用法。

```html
<!-- 独立使用 -->
<vxe-toolbar>
  <template #buttons><button>自定义按钮</button></template>
  <template #tools>
    <button @click="onClick">工具</button>
  </template>
</vxe-toolbar>

<!-- 关联表格（grid 内自动） -->
<vxe-grid
  :toolbar-config="{ enabled: true, buttons: [{ code: 'myBtn', name: '自定义' }] }"
  @toolbar-button-click="onButtonClick"
/>
```

--------------------------------

### Import and use vxe-table in Vue 3

Source: https://github.com/x-extends/vxe-table/blob/main/README.zh-TW.md

Import VxeUITable and its CSS, then install it as a Vue plugin. This enables the table component globally in your app.

```javascript
// ...
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeUITable).mount('#app')
```

--------------------------------

### setConfig(options?)

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-ui.md

合并全局配置。

```APIDOC
## setConfig(options?)

### Description
合并全局配置。

### Method
Function

### Signature
`(options?: VxeGlobalConfig) => ...`

### Parameters
- **options** (VxeGlobalConfig) - Optional - 全局配置对象。

### Example
```ts
import { VxeUI } from 'vxe-table'
VxeUI.setConfig({ table: { stripe: true } })
```
```

--------------------------------

### Radio Selection Methods

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/vxe-table-state.md

Methods to manage radio selection state, including setting, getting, checking, and clearing the selected radio row.

```APIDOC
## Radio Selection Methods

### Description
These methods allow you to control and query the radio selection state of the table.

### Methods

- **getRadioRecord (isFull)** - Returns the selected radio record. `isFull` indicates whether to include all records.
- **setRadioRow (row)** - Sets the selected radio row.
- **setRadioByRowKey (rowKey: any)** - Sets the selected radio row by its `rowKey` value.
- **setRadioRowKey (rowKey)** - Sets the selected radio row by its internal `rowid` value.
- **isCheckedByRadioRow (row)** - Returns whether the given row is selected as radio.
- **isCheckedByRadioRowKey (key)** - Returns whether the row with the given key is selected as radio.
- **clearRadioRow ()** - Clears the radio selection.
- **getRadioReserveRecord (isFull)** - Returns the reserved radio record (for pagination). `isFull` indicates whether to include all records.
- **clearRadioReserve ()** - Clears the reserved radio record.
```

--------------------------------

### 根入口 index.ts 导出与全局挂载

Source: https://github.com/x-extends/vxe-table/blob/main/_autodocs/api-reference/index.md

打包入口，引入组件与样式，并在全局存在 Vue 时将导出挂载到 window.VXETable（已废弃）。

```ts
import * as VxeUITableExport from './packages/components'
import './styles/all.scss'

if (typeof window !== 'undefined' && (window as any).Vue) {
  if (!(window as any).VXETable) {
    (window as any).VXETable = VxeUITableExport
  }
}

export * from './packages/components'
export default VxeUITableExport
```
Tokens:
Raw