Vxe Table

https://vxetable.cn/
Admin
Vxe Table is a powerful and versatile table component for web applications, offering rich features...
Tokens:1,096
Snippets:15
Trust Score:3.5
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Pure Table Dependencies

Source: https://vxetable.cn/#/start/useTable/install

Commands to install the core Vxe Table library and its dependencies.

```bash
npm install vxe-table@4.20.9 @vxe-ui/core@4.4.19
# 或者
yarn add vxe-table@4.20.9 @vxe-ui/core@4.4.19
# 或者
pnpm add vxe-table@4.20.9 @vxe-ui/core@4.4.19
```

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

### Initialize Vxe Table in Vue

Source: https://vxetable.cn/#/start/useTable/install

Basic setup for importing the library and registering it with the Vue application.

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

// 打印版本号
console.log(`UI=${VxeUI.uiVersion} Table=${VxeUI.tableVersion} Gantt=${VxeUI.ganttVersion} Design=${VxeUI.designVersion}`)
// ...

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

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

### Install TypeScript Type Definitions

Source: https://vxetable.cn/#/start/useTable/install

Install type definitions for TypeScript projects when using the pure table version.

```bash
npm install vxe-pc-ui@4.16.26
# 或者
yarn add vxe-pc-ui@4.16.26
# 或者
pnpm add vxe-pc-ui@4.16.26
```

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

### Configure Versioning in package.json

Source: https://vxetable.cn/#/start/useTable/install

Recommended practice to pin versions using tilde (~) to prevent unexpected breaking changes.

```json
{
  ...
  "vxe-table": "^4.20.9"
  ...
}
```

```json
{
  ...
  "vxe-table": "~4.20.9"
  ...
}
```

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

### 配置 Vxe UI 单元格区域选择插件

Source: https://vxetable.cn/pluginDocs/table

在 main.js 中引入插件文件并设置授权码以启用功能。

```javascript
// ...
import VxeUIBase, { VxeUI } from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

// 引入扩展插件
import './extend-cell-area/vxe-table-extend-cell-area.es6.min'
import './extend-cell-area/vxe-table-extend-cell-area.min.css'

// 设置授权信息
VxeUI.setConfig({
  // showAuthLog: true, // 是否在控制台显示授权信息，专业版和旗舰版支持关闭
  authId: 'Auth ID', // 获取授权后在官网登录后进入“用户中心”查看
  // onAuth (e) {
  //   // 打印授权状态日志
  //   console.log(e)
  // }
})

createApp(App).use(VxeUIBase).use(VxeUITable).mount('#app')
// ...
```
Tokens:
Raw