element-plus 版本升级由@1.1.0-beta.15 升级到@2.0.4 版本时，在开发时遇到的问题整理及解决方法

一、错误： Can't reexport the named export 'xxx' from non EcmaScript module (only default export is available) 处理

这个问题是 element plus 版本升级后，再运行项目，element plus 对 webpack 的一个编译处理。

解决方式：

在 vue.config.js 的 chainWebpack 下增加一个规则：

1
2
3
4
5
6
7
8
9
chainWebpack(config){
  config.module
  .rule("element-plus-2")
  .test(/\.mjs$/)
  // https://webpack.docschina.org/configuration/module/#ruletype
  .type("javascript/auto")
  .include.add(/node_modules/)
  .end();
}

二、样式错误问题：input的白/蓝边、图片的灰色底

在做用户登录发现的el-input 存在的2个样式问题

1
2
3
4
5
6
7
8
9
10
// 处理 input 的白/蓝边
.el-input__inner {
  box-shadow: none !important;
  --el-select-input-focus-border-color: none !important;
}

// 处理图片的灰色底
.el-avatar {
  --el-avatar-bg-color: none !important;
}

三、tbody路径的变更

1.x版本的element plus获取el元素的方式为：

1
const el = tableRef.value.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]

2.x版本的element plus获取el元素的方式为

1
const el = tableRef.value.$el.querySelectorAll('.el-table__body > tbody')[0]

四、中台项目侧边栏收起图标不显示问题

查看控制台发现，#app .sidebar-container .svg-icon{margin-left:16px} 这个样式存在问题

解决方式：在侧边栏menu收起时，取消margin-left

1
2
3
4
5
.el-menu--collapse{
  .svg-icon{
    margin-right:0px;
  }
}