vue + element 错误收集

20112061

已于 2022-08-25 12:01:03 修改

阅读量1.4k

点赞数 2

分类专栏： Vue 前端学习之路文章标签： vue elementui

于 2021-08-24 18:03:45 首次发布

本文链接：https://blog.csdn.net/u011269322/article/details/119895722

版权

Vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

前端学习之路

8 篇文章

订阅专栏

vue + element 错误收集

1. 错误1：Uncaught (in promise) cancel

	组件名称：messageBox组件
	错误原因：在this.$megbox({}) 的后面没有加上 .catch(() => {})
	![错误截图](https://img-blog.csdnimg.cn/ba57067e8c46437d90207bbbf4a1b72e.png)

2. 错误2：在scss预编译中使用组件样式穿透“>>>”时，在我电脑上有效果，在同事电脑上没有效果

	错误分析：可能是样式穿透“>>>”兼容性问题
	解决办法：用“::v-deep”替换 “>>>”
	整理：组件样式穿透有三个写法：“>>>”、“/deep/”、“::v-deep”

区别

如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错。可以使用 /deep/

/deep/在vue-cli3可能会导致变异报错。这个时候用::v-deep

::v-deep在预处理器 scss 、sass、less 比较通用

3. 错误3：在vue项目中使用el-menu，设置侧边栏的默认显示，一直显示不了

<!-- 发生错误的代码 -->
<el-menu
  class="el-menu-vertical-demo"
  :collapse="isCollapse"
  :text-color="sideStyle.textColor"
  :default-active="defaultActive"
  :active-text-color="sideStyle.activeTextColor"
  :background-color="sideStyle.bgColor">
  <menu-com v-for="item in menuObj.children" :key="item.id" :item="item" />
</el-menu>

错误原因：:key="item.id"这个没有值
解决：修改为  :key="item.name"
其实这是一个vue组件多次使用的问题，比如组件内容错位，组件内容有联动，组件内容没有达到预期的效果，
就是因为在同一个页面多次调用同一组件，没有使用唯一key造成的

4. 错误4：带返回值的递归函数返回值为undefined

错误来源：在进行尾部递归的时候没有在函数之前加return
代码：

// 获取json数据的第一个子级
getChild (json) {
 if(json.length && json[0].children && json[0].children.length) {
 	// 错误写法
 	// this.getChild(json[0].children)
   return this.getChild(json[0].children)
 } else {
   return json[0]
 }
}

5. 错误5：路由菜单侧边栏在收起时还会显示标题文字和小图标

错误原因：对照elmentui文档，是因为动态菜单组件必须一个div根元素，就会多一层div标签
错误图片:
![在这里插入图片描述](https://img-blog.csdnimg.cn/15f6bfc771b44067b45203c146779bc8.png)

在这里插入图片描述
解决办法：暴力解决

```css
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
```

6. 错误6：TypeError: “exports” is read-only / Cannot assign to read only property ‘exports’ of object ‘#’

错误原因：用webpack打包之后才会有这个错误，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
错误修正: export default  替换 module.exports

7. 错误7: el-dialog 遮罩层问题

这种问题包括，el-dialog里面的图片查看器显示在遮罩层后面，el-dialog和v-viewer层级问题，嵌套el-dialog被遮住问题，都是层级问题，
解决办法无非是提高层级或者降低层级（把dialog append-to-body 也属于提高层级）

// 降低层级 dialog的默认层级为2000为自动增加
import elementui from 'element-ui'
Vue.use(elementui, { zIndex: 1000 })
// 提高层级
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999,
　　　　} })

8. 注意：height：100%；继承的值

子元素的height: 100%；只能继承父元素的 height 属性，不能继承父元素的 min-height: 300px; 样式，也不能继承 max-height: 300px; 属性。

9. vue3 中引入 cesium报错

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

错误原因：主要原因是wenpace在加载import.meta的时候需要一个loader，安装一下就行了，在vue3+vite中就没有这个问题

npm i @open-wc/webpack-import-meta-loader -S

然后在vue.config.js里面配置,没有就在项目根目录新建一个

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /.js$/,
                    use: {
                        loader: '@open-wc/webpack-import-meta-loader',
                    },
                },
            ],
        },
    },
}

10. vue3中自动引入Element-plus报错

ERROR Invalid options in vue.config.js: “plugins” is not allowed

错误原因：vue.config.js/vue.config.ts 不能直接在module.exports 里面添加属性 - plugins
错误修正：把 plugins 放在configureWebpack 里面就行了

module.exports = {
	configureWebpack: {
		plugins: [
			AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            })
		]
	}
}

11. vue + axios 返回二进制流

错误：vue项目中，结合axios调用后端接口返回excel二进制流，下载excel，返回得excel无法打开，

// vue 代码
post(url, data).then()
// post封装
export default post (url, data) {
	return request({
		url,
		method: 'post',
		data,
	})
}

修改之后代码

//vue代码
postExcel (url, data).then()
// postExcel封装
export default postExcel (url, data) {
	return request({
		url,
		method: 'post',
		data,
		headers: { 'Content-Type': 'application/json,charset=utf-8' },
		responseType: 'arraybuffer', // 二进制流
	})
}

12. vue + elment-ui 中树组件:el-tree

错误：一个页面使用多个el-tree组件的时候，并且都是懒加载，并且load方法不一样的时候，如果几个组件使用v-if,v-else-if，所有的el_tree组件都会使用第一个load方法

原因：因为在组件中 :load=“loadNode” ,在页面渲染的时候loadNode就会被加载，因为使用的if-else的切换方式，那么就只会加载第一个loadNode方法，而之后的loadNode方法没有加载，就会使用第一个loadNode

13. vue + elementui中的v-for嵌套input

错误： input框，输入一个字符就自动失去焦点
原因：因为是两个嵌套的v-for，为了不让key不一样，使用了index + Date.now()的方式，这样的话导致每一次输入key值就发生变化，就会重新渲染

解决办法：使用v-show切换，这样所有的loadNode方法一开始都会被加载，就可以了
（长期更新）

14. vue + elementui中的时间选取

错误：给时间选取添加验证的时候，报错dateObject.getTime is not a function
原因：给时间选取器添加属性value-format=“YYYY-MM-DD HH:mm:ss”，dataObject得到的就不再是一个时间对象，而是字符串，所以报错

解决办法：去掉value-format="YYYY-MM-DD HH:mm:ss"就是了，在需要的时候重新再转一次

15. vue + elementui中的动态合并表格行

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	// rowIndexNumber: 第一个数据的index
	// rowSpanNumber: 合并行跨越的行数 - 1
	 let rowSpanOBj = {
		71: { rowIndexNumber: 0, rowSpanNumber: 20 },
		72: { rowIndexNumber: 21, rowSpanNumber: 11 },
		73: { rowIndexNumber: 33, rowSpanNumber: 5 },
		74: { rowIndexNumber: 39, rowSpanNumber: 5 },
		83: { rowIndexNumber: 45, rowSpanNumber: 3 },
	 }
   if (columnIndex === 0) {
     let array = Object.values(rowSpanOBj)
     for (let i = 0; i < array.length; i++) {
       const el = array[i]
       if (rowIndex === el.rowIndexNumber && el['rowSpanNumber'] > 0) {
         return {
           rowspan: el['rowSpanNumber'] + 1,
           colspan: 1
         }
       } else if (rowIndex <= (el['rowSpanNumber'] + el['rowIndexNumber']) && el['rowSpanNumber'] > 0) {
         return {
           rowspan: 0,
           colspan: 0
         }
       }
     }
   }
 }