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

Posted 2023-03-22

参考技术A 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'importVXETable,Icon,Table,Header,Body,Columnfrom'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'importVXETable,Icon,Table,Header,Body,Columnfrom'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'

JVM-Sandbox常见报错

参考技术A 2021-11-29 15:46:00 chaosblade INFO active module, module=chaosblade;class=com.alibaba.chaosblade.exec.bootstrap.jvmsandbox.SandboxModule;module-jar=/data/chaosblade-1.3.0/lib/sandbox/module/chaosblade-java-agent-1.3.0.jar;
2021-11-29 15:46:00 chaosblade WARN sandbox transform com/alibaba/chaosblade/exec/common/aop/matcher/ClassInfo in loader=ModuleJarClassLoader[crc32=760908258;file=/data/chaosblade-1.3.0/lib/sandbox/module/chaosblade-java-agent-1.3.0.jar;]; failed, module=chaosblade at watch=1000, will ignore this transform.
java.lang.ClassCircularityError: com/alibaba/chaosblade/exec/common/aop/matcher/ClassInfo
at com.alibaba.chaosblade.exec.bootstrap.jvmsandbox.SandboxEnhancerFactory ExtFilterFactory And.matching(GroupMatcher.java:52)
at com.alibaba.jvm.sandbox.core.manager.impl.SandboxClassFileTransformer._transform(SandboxClassFileTransformer.java:118)
at com.alibaba.jvm.sandbox.core.manager.impl.SandboxClassFileTransformer.transform(SandboxClassFileTransformer.java:84)
at sun.instrument.TransformerManager.transform(TransformerManager.java:188)
at sun.instrument.InstrumentationImpl.transform(InstrumentationImpl.java:428)
at java.lang.ClassLoader.defineClass1(Native Method)
at java.lang.ClassLoader.defineClass(ClassLoader.java:763)
at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142)
at java.net.URLClassLoader.defineClass(URLClassLoader.java:467)
at java.net.URLClassLoader.access 1.run(URLClassLoader.java:368)
at java.net.URLClassLoader 400(RoutingURLClassLoader.java:20)
at com.alibaba.jvm.sandbox.core.classloader.RoutingURLClassLoader 1.doClassFilter(SandboxEnhancerFactory.java:61)
at com.alibaba.jvm.sandbox.api.filter.ExtFilter 1.doClassFilter(ExtFilter.java:66)
at com.alibaba.jvm.sandbox.core.util.matcher.ExtFilterMatcher.matchingClassStructure(ExtFilterMatcher.java:59)
at com.alibaba.jvm.sandbox.core.util.matcher.ExtFilterMatcher._matching(ExtFilterMatcher.java:111)
at com.alibaba.jvm.sandbox.core.util.matcher.ExtFilterMatcher.matching(ExtFilterMatcher.java:78)
at com.alibaba.jvm.sandbox.core.util.matcher.GroupMatcher 2.invoke(SandboxProtector.java:91)
at com.sun.proxy. RequestHandler.headerComplete(AbstractHttpConnection.java:944)
at org.eclipse.jetty.http.HttpParser.parseNext(HttpParser.java:634)
at org.eclipse.jetty.http.HttpParser.parseAvailable(HttpParser.java:230)
at org.eclipse.jetty.server.AsyncHttpConnection.handle(AsyncHttpConnection.java:77)
at org.eclipse.jetty.io.nio.SelectChannelEndPoint.handle(SelectChannelEndPoint.java:609)
at org.eclipse.jetty.io.nio.SelectChannelEndPoint 3.run(QueuedThreadPool.java:534)
at java.lang.Thread.run(Thread.java:745)