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 {&nbsp; width: 10px;&nbsp; height: 10px;}//滚动条的滑块.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {&nbsp; background-color: #a1a3a9;&nbsp; border-radius: 3px;}如果是整个页面的滚动条风格是一致的，直接改全局的滚动条样式也可以有效果//滚动条的宽度::-webkit-scrollbar {&nbsp; width: 10px;&nbsp; height: 10px;}//滚动条的滑块::-webkit-scrollbar-thumb {&nbsp; background-color: #a1a3a9;&nbsp; border-radius: 3px;}滚动条样式存在兼容性问题，以上的样式是在webkit浏览器下可生效的