描述:在Vue+Webpack项目中,使用ElementUI插件时,toolTip使用时并不显示,在table中的show-overflow-tooltip使用,超出部分直接超出,既不显示省略号,鼠标浮上去后也不显示tip提示文字,开发和打包后都不行。
分析:经查看,table中的show-overflow-tooltip应用的也是tooTip,归根结底,还是tooTip不显示,可按照这个方向找问。
原因:网上查找了很多相关问题(外网访问不了),一般都是删除node_modules,重新install,或者是在本vue文件中再引用一次相关的插件,但是我试过后都没有效果;最后,在ElementUI的GitHub上issues中找到了相关问题(点击查看问题详情)。原因是:应用了webpack的dllPlugin来做性能优化,dll在打包后,ElementUI的tooTip丢失。导致显示不了。至于table表中超出部分只遮掉,不显示省略号,是因为在template中使用了div。
解决(本解决方案只适合vue2,3版本没看到解决办法,我这边用的也是2,3版本有没有此问题也不清楚):
0.关于table中超出部分不显示省略号,只要将<template scope-slot="slot">中引用的div换成行行内元素span即可。
1.在build>webpack.all.conf.js的export default中加入:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
2.添加完后,需要重新重新进行dll打包,运行命令,运行前提条件:此命令在package.json中的"scripts"里配置:
"dll":"webpack -p --progress --config build/webpack.dll.config.js"
运行:
npm run dll
完成后重新启动:
npm run dev
解决完。