Front-end Developer / Music Producer
👨‍💻 2020-07-20

“???”

“卧槽?”

”嗯?“

是我,也是你,对不对?

对于刚开始使用ElementUI的朋友们,我敢肯定 90%的你们反应都是上面那样。

先来看看那些官网没有讲过的玩法

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

1. el-scrollbar

image-20200720172813301

不说废话,看官网的滚动条,很强有没有!

有的朋友要说了,就这?完全可以写样式控制的呀!

是的你没说错!

然而样式控制滚动条只能在使用 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 的方法,这样的话,tableDatadeleted一旦发生改变,行 class 也会相应跟着变化
  2. 在选择列上加上:selectable属性来注册一个改变选择状态的方法,tableDatadeleted变成false时,此属性的值也变成false,这样这一行就不能被选中了。
  3. 剩下就是按钮和文字的切换,这就不用我再多赘述了吧~

好的,接下来我们说

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

1. 还是el-scrollbar

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

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

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

    只留给开发者两条路:

    • 自己造轮子
    • 干脆不使用el-scrollbar
  • 稳定性有待优化,在目前项目使用中有小概率滚动条会出不来,具体原因没有去深究

2. el-popconfirm

image-20200720181336936

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

3. el-table

image-20200720181527197

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

最后总结的话就是:

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

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

自己写样式

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