一、Drawer 抽屉
这个抽屉组件在 Element 组件的最下面，通过搜索框匹配不到
它是一个带遮罩效果的弹出层，可以设置从设备屏幕的上下左右四个方向弹出，值得注意的是只能从屏幕的起始位置弹出，如果设置绝对定位或相对定位或者是 margin 都会使里面放置的内容布局出错，遮罩层的点击关闭抽屉事件也会失效。
Drawer 抽屉类似于 Dialog 弹框组件，里面可以放置表单、表格等多种内容。
上方页面的效果一开始是使用 Dialog 组件加上手写的 CSS 遮罩来实现，代码冗杂切实现比较麻烦，各种布局层级定位需要调整不好维护，还要修改兼容组件封装好的默认功能，所以挑对组件真的很关键。
Bug：对于抽屉里的表单，如果是在 Vue 的 data 中写死的静态数据则不会自动打开获取焦点，但是后台接口遍历得到的数据则会在抽屉打开的时候自动聚焦第一个表单。如果这个表单是浏览框，它会在抽屉打开的时候自动打开浏览框弹窗，这样体验就很差了。
我一开始是想用 jQuery 获取到抽屉中的第一个表单元素，给抽屉展开的按钮绑定一个点击方法 blur() 去取消聚焦第一个表单。这种方案完全不行，因为抽屉会先展开 => 聚焦第一个元素 => 再取消聚焦，此时浏览框已经打开了。后来查文档发现 Drawer 组件有两个事件，open：Drawer 打开的回调；opened：Drawer 打开动画结束时的回调。写在这里头还是不行。
- 需要在 Drawer 中设置一个 div，设置 ref 和 tabindex 属性用于定位，为 drawer 设置 opened 事件：
- 在事件中手动聚焦在 div 中（注意：此处的 _this 为在 create 中手动定义的 this）：
created() {
_this = this;
},
clearFocus: function () {
_this.$refs.clearRef.focus();
setTimeout(function () {
_this.$refs.clearRef.blur()
},200)
$("input").blur()
}
这样就解决了 Element UI Drawer 抽屉组件的聚焦 Bug！
文档中 Drawer 抽屉组件的 size 属性值为 number / string，试了下设置成 auto 可以自适应，这样表单过多时就不会出现：overflow: hidden; 效果。
二、Input 输入框
有时需要屏蔽 input 默认的回车事件/取消回车自动提交表单：
方法一： 在 form 标签上添加 ‘onkeypress’
<form onkeypress="return event.keyCode != 13;">
方法二： JQuery 统一处理
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
方法三： JavaScript 统一处理
killDefault(event){
var evt = window.event || event;
if (evt.keyCode == 13) {
if(evt.preventDefault){
evt.preventDefault();
}else{
evt.returnValue=false;
}
}
}
三、Select 选择器
在 el-select 里面增加 style=“width:500px”，发现没有效果，为什么呢，因为在 element 里面固定好了控件的样式，el-input 里面增加style=”width:500px” 会有效果。
可以利用 CSS 的样式优先级写一个自定义的 class 来覆盖。
四、table 行高
Element UI 自带的 table 设置行高：
:row-style="{height: 'xxpx'}"
:cell-style="{padding: '0'}"
五、表格联合搜索框
这个不像 Bootstrap 和若依框架只需要申明式的做一下配置就可以实现搜索框对表格数据的筛选联动，具体代码略：
// 搜索框
<el-input type="text" v-model="tableDataName" size="mini"></el-input>
// 按钮
<el-button type="primary" @click="doFilter" size="mini">搜索</el-button>
mounted: function () {
var that = this;
that.getTableData();
that.getTableFilter()
}
// 获取表格数据
getTableData() {..}
// 筛选后台数据
getTableFilter() {...}
// 筛选表格
doFilter() {...}