element table滚动条占宽度_element-ui表格的滚动条样式修改

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

可以在主入口完成

我挑选了perfect-scrollbar(关于这款并非为vue而制作的插件如何在vue里使用的具体细节可以参见我写过的一篇文章)

大致如下

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);

}

}

)

},

})

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

如果是普通的元素

如果是饿了么的table组件

是不是很简单

效果拔群