使用element-ui 遇到的问题总结（待续...

 1. 一行多个 如果label 文字换行， 默认的line-height: 36px 太大，会导致一行不对齐，覆盖line-height: 1.5

2. 使用了 scoped，deep 深度选择,

/deep/ 无效且报错

SassError: expected selector.  /deep/.voucher-dialog

 发现是sass-loader 加载的是 sass(dart-sass)， 不是使用的 node-sass ； 所以导致无效解析不了 ; 使用 ::v-deep 替换  css 的>>>写法和node-sass /deep/

1. sass 只支持 ::v-deep
2. node-sass 支持 /deep/和::v-deep

源代码: 默认加载node-sass ， 如果node-sass 加载失败; 则去加载sass(drat-sass); 最新的版本应该是默认加载sass；

官方推荐使用 sass(dart-sass) : 保存时运行， 依赖少;  

node-sass: 自动实时编译;会有node 版本不兼容问题 (如果升级了node版本，可能会导致node-sass编译报错);有时候还会因为网络问题安装不上(因为有些依赖的库地址被墙);依赖较多; 是一个 nodejs 环境下提供的一个 Bridge，它提供了调用 LibSass 能力（而 LibSass 是一个 C++ 实现的样式预处理器）,并不完全是js  实现,借助了c++能力,

Node Sass to Dart Sass | vue-element-admin

3.  el-dialog弹窗组件使用close或者closed关闭报错事件 

el-dialog 单独组件中使用:visible.sync：(前提是没有使用新的字段接收value, 直接使用的是prop 里面的默认值value)如果是在close 里面调用 this.$emit('show', false) 点击关闭按钮会报错, 因为el-dialog 源码里面  在close 的时候 会去调用 下面的方法， 会直接修改el-dialog 单独组件的显示值，prop 值 数据流向是单向的，是导致流向冲突，报错,； 由el-dialog 源码 可知 可以在before-close 去修改（红线框里面的这句会导致 el-dialog 组件 中的value 为false ， 流向冲突）

4. 有时候el-select 下拉无响应  : 

直接修改值无效 , 需要设置响应式 比如 this.$set(obj, 'name', 'xxxx') 或者强制更新 $forceupdate()

5. el-form 修改、新增弹窗共用的时候 表单验证失效问题: (比如先点击修改 再点击新增 , 新增的时候 弹窗 数据仍然存在， 或者说 表单的验证红框存在), 可从以下几个方面检查：

  1）检查form-item prop 是否添加 

   2)   初次使用resetField 可能会报错，因为此时 el-form还没有挂载 , 可以

this.$nextTick(()=> { this.$refs.form.resetField()}) 或者 
this.$refs?.form?.resetField()

   3) resetField 不是清空表单，而是把表单数据重置到初始值;  这个初始值 是el-form-item挂载    （mounted） 时的值  ; 首先要保证 初始值 是干净的; 假如说我们想点击新增的时候 数据是空的，    那么在el-form 挂载的时候（再不刷新的前提下 只会挂载一次） 要保证 值是空的; 

  一般 再点击查看或者修改的时候 我们会显示详情， 这个时候 如果数据是同步的，需要再

this.$nextTick(() => { this.dataForm = xxxx}) 中赋值

如果是axios接口获取值的话 ，.then里面赋值，已经是异步， 不需要再用nextTick 了\

4)  如果表单弹窗是一个单独的组件的话 ，可以再before-close 里面 去resetFiled的

6. el-icon 偶发乱码

主要是sass(dart-sass)原因, 编译unicode 输出的是明文也就是乱码 ； 升级到v1.38.0或者以上版本 + expanded 模式(该版本+模式下 1.38.0版本输出的Unicode编码)（默认是压缩模式, 压缩模式及时升级版本也是不行的）; 或者使用css-unicode-loader

1. 安装css-unicode-loader(一般采用使用这种就可以， 修改模式的那种方式会导致css 代码不压缩比如空格、换行符还会存在等等

configureWebpack: config => {
    const sassLoader = require.resolve('sass-loader');
    config.module.rules.filter(rule => {
      return rule.test.toString().indexOf("scss") !== -1;
    })
      .forEach(rule => {
        rule.oneOf.forEach(oneOfRule => {
          const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader);
          oneOfRule.use.splice(sassLoaderIndex, 0,
            { loader: require.resolve("css-unicode-loader") });
        });
      });
  },

2. (先查看sass(dart-sass)版本， 更新版本(npm install sass@latest -D) 并且修改输出模式 为expanded

css: {

    loaderOptions: {

      sass: {

        sassOptions: { outputStyle: "expanded" }, // 解决dart-sass导致的偶发性乱码

      },

    },

  },

7. el-upload 使用http-request 覆盖默认的上传行为会导致进度条失效 on-progress 方法不会被触发

:http-request="uploadFile" 参数 有以下参数

 使用axios 的onUploadProgress 方法来获取当前的进度 loaded/total , 然后再http-request 定义的方法里面主动去调用el的默认的进度条方法 onProgress 

async uploadFile(param) {
            console.log("=========", param);
 // 打印param 会发现这个里面参数如下
 // {file, onProgress, onError, onSucess}
            let file = param.file;
            let fileName = file.name;
            let tmpArr = fileName.split(".");
            let suffix =
                tmpArr && tmpArr.length > 1 ? tmpArr[tmpArr.length - 1] : ".doc";

            let reader = new FileReader(); //实例化文件读取对象
            reader.readAsDataURL(file); //将文件读取为 DataURL,也就是base64编码
            const fileData = await new Promise((resolve) => {
                reader.onload = (e) => {
                    //文件读取成功完成时触发
                    let dataURL = e.target.result; //获得文件读取成功后的DataURL,也就是base64编码
                    let tempData = {
                        fileName: fileName.substring(0, fileName.lastIndexOf(".")), //文件名
                        suffix: suffix, //文件后缀
                        fileBase64: dataURL.substring(dataURL.indexOf(",") + 1),
                    };
                    resolve(tempData)
                };
            })

// 使用回调获取axios 接口上传进度 loaded/total
            const onUploadProgress = percentEvent => {
                const percent = parseInt((percentEvent.loaded/percentEvent.total) * 10000) / 100
                if(percent < 100) { // 为了视觉上和接口返回同步
                    param.onProgress({percent:percent}) // 调用el-upload 的进度条方法
                }
            }
            uploadTemplateFile(fileData, onUploadProgress)
            .then((res) => {
                if (res && res.respCode === "00") {
                    this.$message.success("上传文件成功");
                    param.onProgress({percent:100})
                    
                     param.onSuccess(res) // 调用el-upload 的成功方法
                }
            })
            .catch((err) => {
                // debugger
                console.log('上传失败')
                 param.onError(err) // 调用el-upload 的失败方法 
            });
        },

参考:

[Bug Report] 使用dart-sass打包element icon出现乱码 · Issue #21763 · ElemeFE/element · GitHub

你好，想问一下乱码问题的原因是sass-loader的问题吗？感谢！ · Issue #4 · styzhang/css-unicode-loader · GitHub