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

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

该问题 vxe-table@2.5 以下版本不受影响,由于 vxe-table@2.5+ 以上版本支持最小化打包的方式

所以依赖库 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'

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,265评论 1 22
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,691评论 0 0
  • webpack-4.x 安装 npm i webpack -g: 全局安装webapck 基本使用 不使用配置文件...
    duans_阅读 1,763评论 0 12
  • 前言: 拿到一个项目 , 生成默认package.json,可以执行npm init -ypackage.json...
    筱疯子阅读 1,999评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,098评论 0 2