ElementUI：那些官方文档里没有介绍的玩法，当然了，还有坑

“？？？”

“卧槽？”

是我，也是你，对不对？

对于刚开始使用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>

1. 获取页面滚动条的宽度
2. .scroll-bar的宽度设置为 100% + 滚动条宽度，这样多出去的宽度会被 scroll-bar-wrap 给挡住
3. 接下来创建虚拟滚动条以及 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>

看起来很长一块代码，其实就三点需要注意一下：

1. el-table上加上:row-class-name来注册一个改变行 class 的方法，这样的话，tableData中deleted一旦发生改变，行 class 也会相应跟着变化
2. 在选择列上加上:selectable属性来注册一个改变选择状态的方法，tableData中deleted变成false时，此属性的值也变成false，这样这一行就不能被选中了。
3. 剩下就是按钮和文字的切换，这就不用我再多赘述了吧~

好的，接下来我们说

是的，三个超大加粗的坑。

1. 还是el-scrollbar

世上没有完美的东西，是的，又流畅又保持了一致性的滚动条组件也是有缺点的。

• 它不支持max-height属性，在一些特定场景上局限性非常大。

• 没有集成到 ElementUI 自己的组件中去，如：固定表头、表列的表格中使用的还是浏览器自带的滚动条，对于有强迫症开发者/用户简直就是…抓狂

  只留给开发者两条路：

  • 自己造轮子
  • 干脆不使用el-scrollbar

• 稳定性有待优化，在目前项目使用中有小概率滚动条会出不来，具体原因没有去深究

2. el-popconfirm

文档中定义的两个按钮事件，在目前版本(2.13.2)中是无效的。(或者只是我不会用，欢迎大佬指正

3. el-table

可能是 reset CSS 中的写法不同导致的样式错乱，这个问题在有固定列且数据复杂的表格中非常容易复现。

最后总结的话就是：

如果你没有强迫症，对于这些小瑕疵持无所谓的态度，那我给你的建议是：直接上，不要犹豫！

如果你是一个设计师兼前端程序员而且有重度强迫症不能忍受瑕疵，我的建议是：

自己写样式！

如果领导坚持要用那你就说服他把上面那些缺点全都告诉他（嗯！