vxe-table
最后更新于：2022-04-02 03:32:21
[TOC]
> [gitee](https://gitee.com/xuliangzhan_admin/vxe-table)
> [在线演示](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic)
## 安装
`npm install xe-utils vxe-table
`
## 快速使用
```
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
// 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal
Vue.prototype.$modal = VXETable.modal
```
## 按需引入
`npm install babel-plugin-import -D
`
编辑配置
```
{
"plugins": [
[
"import",
{
"libraryName": "vxe-table",
"style": true // 样式是否也按需加载
}
]
]
}
```
src/plugins/utils.js
`import 'xe-utils'
`
src/plugins/table.js
main.js ``` import './plugins/utils' import './plugins/table' ```
';
main.cpp
``` import Vue from 'vue' import XEUtils from 'xe-utils' import { VXETable, Table, Column, Header, Footer, Filter, Edit, Menu, Export, Keyboard, Validator, Grid, Toolbar, Pager, Checkbox, Radio, Input, Textarea, Button, Modal, Tooltip, Form, Select, Switch, List } from 'vxe-table' import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN' // 按需加载的方式默认是不带国际化的，需要自行导入 VXETable.setup({ i18n: (key, value) => XEUtils.get(zhCNLocat, key) }) // 先安装依赖模块 Vue.use(Icon) Vue.use(Column) Vue.use(Header) Vue.use(Footer) Vue.use(Filter) Vue.use(Edit) Vue.use(Menu) Vue.use(Export) Vue.use(Keyboard) Vue.use(Validator) Vue.use(Tooltip) Vue.use(Grid) Vue.use(Toolbar) Vue.use(Pager) Vue.use(Form) Vue.use(Checkbox) Vue.use(Radio) Vue.use(Switch) Vue.use(Input) Vue.use(Select) Vue.use(Button) Vue.use(Modal) Vue.use(List) // 再安装核心库 Vue.use(Table) // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal Vue.prototype.$modal = VXETable.modal ```main.js ``` import './plugins/utils' import './plugins/table' ```