vxe-table 使用示例(常见报错)

1. 引用顺序错误导致依赖报错

该问题 [email protected] 以下版本不受影响，由于 [email protected]+ 以上版本支持最小化打包的方式

所以依赖库 xe-utils 必须要在 vxe-table 之前引用，否则就会报以下错误

安装指南

require: Vue 2.6+

require: xe-utils 2.2+

1. 全局导入方式，所有版本通用（完整 ≈ 240KB）

src/plugins/utils.js

import'xe-utils'

src/plugins/xtable.js

importVuefrom'vue'importVXETablefrom'vxe-table'import'vxe-table/lib/index.css'Vue.use(VXETable)

main.js

import'./plugins/utils'import'./plugins/xtable'

2. 全局导入方式（完整，体积稍小 ≈ 220KB）

src/plugins/utils.js

importXEUtilsfrom'xe-utils/methods/xe-utils'importdependenciesfrom'vxe-table/lib/utils/dependencies'//按需导入依赖函数库XEUtils.mixin(dependencies)

src/plugins/xtable.js

importVuefrom'vue'importXEUtilsfrom'xe-utils/methods/xe-utils'importVXETablefrom'vxe-table'importdependenciesfrom'vxe-table/lib/utils/dependencies'import'vxe-table/lib/index.css'Vue.use(VXETable)

main.js

import'./plugins/utils'import'./plugins/xtable'

3. 按需导入方式（按需，体积最优 >≈ 140KB）

src/plugins/utils.js

import'xe-utils'

src/plugins/xtable.js

importVuefrom'vue'import{VXETable,Icon,Table,Header,Body,Column}from'vxe-table'importzhCNLocatfrom'vxe-table/lib/locale/lang/zh-CN'//按需导入需要的模块Vue.use(Icon)Vue.use(Table)Vue.use(Header)Vue.use(Body)Vue.use(Column)//导入默认的国际化（如果项目中使用多语言，则应该导入到 vue-i18n 中）VXETable.setup({i18n:(key,value)=>VXETable.t(zhCNLocat, key)})

main.js

import'./plugins/utils'import'./plugins/xtable'

安装插件，支持按需加载

npm install babel-plugin-import-D

修改 .babelrc 或 babel.config.js 配置文件

module.exports={//...,plugins:[    ['import',      {'libraryName':'vxe-table','style':true}    ]  ]}

4. 按需导入方式（按需，体积最优 >≈ 120KB）

src/plugins/utils.js

importXEUtilsfrom'xe-utils/methods/xe-utils'importdependenciesfrom'vxe-table/lib/utils/dependencies'//按需导入依赖函数库XEUtils.mixin(dependencies)

src/plugins/xtable.js

importVuefrom'vue'import{VXETable,Icon,Table,Header,Body,Column}from'vxe-table'importzhCNLocatfrom'vxe-table/lib/locale/lang/zh-CN'//按需导入需要的模块Vue.use(Icon)Vue.use(Table)Vue.use(Header)Vue.use(Body)Vue.use(Column)//导入默认的国际化（如果项目中使用多语言，则应该导入到 vue-i18n 中）VXETable.setup({i18n:(key,value)=>VXETable.t(zhCNLocat, key)})

main.js

import'./plugins/utils'import'./plugins/xtable'

安装插件，支持按需加载

npm install babel-plugin-import-D

修改 .babelrc 或 babel.config.js 配置文件

module.exports={//...,plugins:[    ['import',      {'libraryName':'vxe-table','style':true}    ]  ]}

4. 未编译的源码导入方式（按需，体积最小 >≈ 100KB）

在 scss 样式文件中引用

@import'vxe-table/styles/variable.scss';@import'vxe-table/styles/icon.scss';@import'vxe-table/styles/table.scss';@import'vxe-table/styles/column.scss';@import'vxe-table/styles/header.scss';@import'vxe-table/styles/body.scss';

src/plugins/utils.js

importXEUtilsfrom'xe-utils/methods/xe-utils'importdependenciesfrom'vxe-table/packages/utils/dependencies'//按需导入依赖函数库XEUtils.mixin(dependencies)

src/plugins/xtable.js

importVXETablefrom'vxe-table/packages/v-x-e-table'importTablefrom'vxe-table/packages/table'importHeaderfrom'vxe-table/packages/header'importBodyfrom'vxe-table/packages/body'importColumnfrom'vxe-table/packages/column'importzhCNLocatfrom'vxe-table/packages/locale/lang/zh-CN'//按需导入需要的模块Vue.use(Table)Vue.use(Column)Vue.use(Header)Vue.use(Body)//导入默认的国际化（如果项目中使用多语言，则应该导入到 vue-i18n 中）VXETable.setup({i18n:(key,value)=>VXETable.t(zhCNLocat, key)})

main.js

import'./plugins/utils'import'./plugins/xtable'