“？？？”
“卧槽？”
” 嗯？“
是我，也是你，对不对？
对于刚开始使用ElementUI的朋友们，我敢肯定 90% 的你们反应都是上面那样。
先来看看那些官网没有讲过的玩法
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
1. el-scrollbar
不说废话，看官网的滚动条，很强有没有！
有的朋友要说了，就这？完全可以写样式控制的呀！
是的你没说错！
然而样式控制滚动条只能在使用 chromium 内核的浏览器上才能实现，简单来说就是，会导致用户体验不一致。
一般 JS 库搞出来的虚拟滚动条又不如原生滚动条顺滑流畅而且极度不稳定。
ElementUI 滚动条的新思路可以说是既保留了原生滚动条的流畅性，又保证了几个主流浏览器上样式的一致性。
具体用法很简单：
<el-scrollbar style="height:200px">
<div class="your-content">
blah blah blah
</div>
</el-scrollbar>
需要注意的就是el-scrollbar标签或者父级元素必须要有 css: height属性，不然滚动条出不来，max-height是不管用的。
至于原理，其实也很简单。只是在此之前我们都没有想到就是了：
<div class="scroll-bar-wrap" style="overflow:hidden;width:100%">
<div class="scroll-bar" style="height:100px;overflow-y: scroll">
<div class="content" style="height:200px">
</div>
</div>
</div>
- 获取页面滚动条的宽度
.scroll-bar的宽度设置为 100% + 滚动条宽度，这样多出去的宽度会被 scroll-bar-wrap 给挡住- 接下来创建虚拟滚动条以及 mount 事件啥的
由于滚动事件都是通过原生滚动条反馈出来的，所以使用感受上与原生无异。
2. 表格中自定义行 Class 及选择框的开关
关于这块，文档里其实有列出来，但是没有 demo，而我又不是很喜欢看文档的那种（该打），所以摸黑摸了一段时间。
需求：首先他是个多选表格，然后用户可以点击行末按钮移除该列，但并不是立马移除，而且让这一行变灰，移除按钮要变成已移除文字，同时，前面的选择框也要变成不可选。
<template>
<el-table :data="tableData" style="width: 100%" :row-class-name="getRowClassName">
<el-table-column type="selection" :selectable="getRowDisabled">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="!scope.row.deleted" size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">移除</el-button>
<span v-else>已移除</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
deleted: false
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
deleted: false
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
deleted: false
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
deleted: false
}]
}
},
methods() {
return {
getRowClassName: function(row){
if (row.row.deleted) {
return 'deleted';
}
},
getRowDisabled: function(row){
if (row.deleted) {
return false;
}else{
return true
}
},
handleDelete: function(index, row){
var _this = this;
_this.tableData[index].deleted = true
}
}
}
}
</script>
看起来很长一块代码，其实就三点需要注意一下：
el-table上加上:row-class-name来注册一个改变行 class 的方法，这样的话，tableData中deleted一旦发生改变，行 class 也会相应跟着变化- 在选择列上加上
:selectable属性来注册一个改变选择状态的方法，tableData中deleted变成false时，此属性的值也变成false，这样这一行就不能被选中了。 - 剩下就是按钮和文字的切换，这就不用我再多赘述了吧～
好的，接下来我们说
坑
1. el-scrollbar
世上没有完美的东西，是的，又流畅又保持了一致性的滚动条组件也是有缺点的。
-
它不支持
max-height属性，在一些特定场景上局限性非常大。 -
没有集成到 ElementUI 自己的组件中去，如：固定表头、表列的表格中使用的还是浏览器自带的滚动条，对于有强迫症开发者 / 用户简直就是… 抓狂
只留给开发者两条路：
- 自己造轮子
- 干脆不使用
el-scrollbar
-
稳定性有待优化，在目前项目使用中有小概率滚动条会出不来，具体原因没有去深究
2. el-popconfirm
文档中定义的两个按钮事件，在目前版本 (2.13.2) 中是无效的。(或者只是我不会用，欢迎大佬指正
3. el-table
可能是 reset CSS 中的写法不同导致的样式错乱，这个问题在有固定列且数据复杂的表格中非常容易复现。
最后总结的话就是：
如果你没有强迫症，对于这些小瑕疵持无所谓的态度，那我给你的建议是：直接上，不要犹豫！
如果你是一个设计师兼前端程序员而且有重度强迫症不能忍受瑕疵，我的建议是：
自己写样式！
如果领导坚持要用那你就说服他把上面那些缺点全都告诉他（嗯！