element-ui表格的滚动条样式修改

Question

默认element-ui的表格的滚动条样式是这样，有没有其他的滚动条样式？如何修改？

Answer 1

随便找个滚动条插件 然后运用一下自定义指令

可以在主入口完成

我挑选了perfect-scrollbar

大致如下

import Vue from 'vue';

//自定义滚动条

import PerfectScrollbar from 'perfect-scrollbar';

/**

 * @description 为自定义滚动条全局注入自定义指令。自动判断该更新PerfectScrollbar还是创建它

 * @param {Element} el - 必填。dom元素

 */

const el_scrollBar = (el) => {

    //在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_

    if (el._ps_ instanceof PerfectScrollbar) {

        el._ps_.update();

    } else {

        //el上挂一份属性

        el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true });

    }

};

Vue.directive("anyNameYouLike",{

    inserted(el, binding){

        const { arg } = binding;

        if(arg === "任何你喜欢的标记"){

            el = el.querySelector(".el-table__body-wrapper");

            if(!el){

                return console.warn("未发现className为el-table__body-wrapper的dom");

            }

        }

        const rules = ["fixed", "absolute", "relative"];

            if (!rules.includes(window.getComputedStyle(el, null).position)) {

                console.error(`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join("、")}`)

            }

            el_scrollBar(el);

    },

    componentUpdated(el, binding, vnode) {

        const { arg } = binding;

        if (arg === "任何你喜欢的标记") {

            el = el.querySelector(".el-table__body-wrapper");

            if(!el){

                return console.warn("未发现className为el-table__body-wrapper的dom");

            }

        }

        vnode.context.$nextTick(

            () => {

                try {

                    el_scrollBar(el);

                } catch (error) {

                    console.error(error);

                }

            }

        )

    },

})

然后你使用起来就很简单了

如果是普通的元素

<div v-anyNameYouLike>

    <!--巴拉巴拉-->

</div>

如果是饿了么的table组件

<el-table :data="你的数据源" v-anyNameYouLike:任何你喜欢的标记>

    <!--巴拉巴拉-->

</el-table>

是不是很简单

效果拔群

Answer 2

之前在使用element-ui表格的时候有修改过滚动条的样式，但是没有找到官方的途径

后来是这么改的，可以参考看看

//滚动条的宽度

.your-table .el-table__body-wrapper::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

//滚动条的滑块

.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {

  background-color: #a1a3a9;

  border-radius: 3px;

}

如果是整个页面的滚动条风格是一致的，直接改全局的滚动条样式也可以有效果

//滚动条的宽度

::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

//滚动条的滑块

::-webkit-scrollbar-thumb {

  background-color: #a1a3a9;

  border-radius: 3px;

}

滚动条样式存在兼容性问题，以上的样式是在webkit浏览器下可生效的