Button不应使用 .el-button+.el-button {margin-left: 10px;}
打开官方手册页面，如果我们将浏览器窗口缩小，会看到这种景象：
只要折行就一定对不齐，很荒谬，是不是？
所以现在有2种办法。
方法1，改为设置margin-right：
.el-button+.el-button {
margin-left: 0 !important;
}
.el-button {
margin-right: 10px;
}
这样就可以了，如果考虑最后一个Button不要有margin-right，则可以：
.el-button+.el-button {
margin-left: 0 !important;
}
.el-button {
margin-right: 10px;
}
.el-button:last-child {
margin-right: 0;
}
这么做还有一个问题，就是非倒数第一行的末尾Button会有margin-right空白，怎么办呢？
方法2，letter-spacing大法
如果你非常在意这个问题，你可以用方法2，它的原理是利用Button的inline-block的特点，控制它的letter-spacing：
.el-button+.el-button {
margin-left: 0 !important;
}
.容器class {
letter-spacing: 10px;
}
如果想无脑一些，可以规定一个容器class，比如：
<div class="ls-10">这个ls-10就是letter-spacing: 10px的简写</div>
再加上全局样式：
.ls-10 {
letter-spacing: 10px;
}
凡是有可能折行的Button，就一律用这个<div class="ls-10"></div>容器包裹，这样你不需要针对每个场景的容器class去专门写代码去控制，比如表格中Button的父元素一般是.cell，而给.cell设置letter-spacing: 10px;会误伤其他单元格，此时内部加一个中间件容器就没问题了。
如果有机会给父元素加.ls-10，那么连中间件容器都可以省了。
Message高度超出页面却无法滚动如何解决？
根据官方手册，Message不应该放复杂的内容，假如你放了很多内容，也依然喜欢用Message，会发现Message高度超出页面却无法滚动，怎办？这样：
.el-message-box__wrapper {
overflow: auto;
}
MessageBox如何阻止弹出重复内容？
某一刻，你点击页面之后，如果网络异常，会弹出多个提示，内容一样，都是“网络错误”什么的。这时候怎么阻止弹出相同的内容？
let _latestMsg = '';
Vue.prototype.msgAlert = function (msg) {
if (_latestMsg !== msg) {
_latestMsg = msg;
Message.alert(msg, '系统提示', {
confirmButtonText: '确定',
type: 'warning',
onClose() {
_latestMsg = '';
}
});
}
}
Progress动画
本来我查了查手册，以为Progress并没有动画，但是看了看它的示例，当percentage有变化的时候的确是有动画的。所以现在问题就是，如何让percentage变化，从0变成1、2、3……一直到真正的百分比值。
思路：
这次要利用
window.requestAnimationFrame()。它是个啥不解释，请另外查阅资料，我现在假设你掌握了这个方法。我的计划是，让每个进度条初始值都是0，每1/60秒加1，这样如果进度条最终值是60，那么需要1秒，如果最终值是100，需要1秒半多。从视觉上说，这是比较合适的。
说句题外话，如果你觉得不合适，比如动画太快，可以将每次加1改成加0.5，不过浮点运算要注意精度。进度条的百分比值，需要一个计算方法，很简单，看代码，不解释。
<template>
<div class="mt5">
<div v-for="(item, i) in list" :key="i">
<div class="line-height-2p8 font-14">
{{ typeList[i].text }}
<span class="float-right">{{ item.number }}</span>
</div>
<el-progress :percentage="item.percentage" :color="typeList[i].color" :show-text="false"></el-progress>
</div>
</div>
</template>
export default {
data() {
return {
typeList: [
{
text: '待处理',
color:'#409EFF',
},
{
text: '处理中',
color:'#67c23a',
},
{
text: '已完成',
color:'#e6a23c',
},
{
text: '回访单',
color:'#f56c6c',
},
],
list: [
{
number: 141,
percentage: 0
},
{
number: 341,
percentage: 0
},
{
number: 11,
percentage: 0
},
{
number: 190,
percentage: 0
},
]
}
},
created() {
const maxNumber = Math.max.apply(null, this.list.map(v=>v.number));
function step(v, final) {
if (v.percentage < final) {
if (final - v.percentage > 1) {
v.percentage += 1;
window.requestAnimationFrame(() => {step(v, final)});
} else {
v.percentage = final;
}
}
}
this.list.forEach(v => {
const final = v.number * 100 / maxNumber;
window.requestAnimationFrame(() => {step(v, final)});
});
},
}
小问题：
这套代码的效果是，最短的那个最先动画，然后是第二短的，然后是第三短的，最后是最长的进度条动，并不是一齐开始。我不知道这是Element UI的原因还是Vue渲染机制的原因。不过好在凑合能用，先这样吧。
利用<el-form>展示结果数据时，调整<el-form-item>的margin-bottom
<el-form-item>除了展示输入表单，还可以展示结果数据，假设整个<el-form>都用来展示结果数据，此时，因为不必考虑提示Error，所以每一行的高度不必这么大，事实上0就可以了，那么怎么简单调整margin-bottom？
解决方案：
设置一个全局class：
.result-form.el-form .el-form-item {
margin-bottom: 0 !important;
}
在需要的<el-form>上加上class="result-form"即可。
如果依然觉得line-height比较高，可以给<el-form>加上size="small"或者size="mini"。
Dialog的"destroy-on-close"无效？
我不知道你是不是也遇到过这个问题，有这样一个场景：
A按钮让Dialog打开，显示A图片，B按钮让Dialog打开，显示B图片。两者复用Dialog。
由A打开的Dialog之后关闭，再由B打开，你会发现，A图片还在，而且要停顿半秒才会切换成B图片。
我的无效方法1：给Dialog加上close事件，将数据清空，下次打开的时候重新赋值。
无效表现：这次更惨，要等3秒钟才会切换图片。
我的无效方法2：给Dialog加destroy-on-close。
无效表现：就像没加一样。
最后采取的有效办法：
给Dialog加v-if，跟:visible.sync=""使用同样的变量，问题解决。
MessageBox的alert如何回车、空格执行“确定”？
MessageBox的alert有一个让人纠结的地方是，alert弹出的消息框，敲回车是没反应的，无法关闭。我看了看手册，没有哪个设置是管回车的事的，但是有一个接近真相的叫closeOnPressEscape，负责是否可通过按下 ESC 键关闭 MessageBox，索性试试，设置为true，结果，回车、空格也一并管用了。
但是，如果焦点还在下层输入框上，而且绑定了@keyup.enter.native="handleLogin"，那么会重复触发一次handleLogin，然后又执行一遍alert，这肯定不行，解决方案是在handleLogin的第一句写上：
event.target.blur();
