element-ui使用perfect-scrollbar修改table等滾動條（非指令，可以兼容複雜table）

首先是perfect-scrollbar的安裝。選擇插件而不是直接改css的原因，是因爲需要兼容火狐你懂的。

npm install perfect-scrollbar --save-dev

 

public.css，scroll-item是自定義類，類似於指令效果，加上clssname就自動生成scrollbar。之所以不用指令，是因爲無法修改element-ui組件，用classname方便一點。transfer-main類好像是我用的另外一個插件裏面的。

.scroll-item,.el-table__body-wrapper,.el-transfer-panel__list,.transfer-main {
	position: relative;
	overflow: hidden !important;
}
.ps__rail-x {
	height: 6px !important;
}
.ps__rail-y {
	width: 6px !important;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  height: 6px !important;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  width: 6px !important;
}

main.js

import PScrollbar from 'perfect-scrollbar';
import "perfect-scrollbar/css/perfect-scrollbar.css";

const scrollClassName = [
	{
		name:"scroll-item",
		props:{//props參考perfect-scrollbar文檔
			suppressScrollX : true,
		}
	},{
		name:"el-table__body-wrapper",
		props:{
			suppressScrollY : true,
		}
	},{
		name:"el-transfer-panel__list",
		props:{
			suppressScrollX : true,
		}
	},{
		name:"transfer-main",
		props:{
		}
	}
];
const update = (el => {
	let className = el.className;
	if(className){
	  let arr = className.split(" ");
	  scrollClassName.forEach(item => {
		  if(arr.indexOf(item.name)>-1){
			  componentsScroll(el,item.props);
		  }
	  })
	}
	if(el.children&&el.children.length>0){
	  for(let i=0;i<el.children.length;i++){
		  update(el.children[i]);
	  }
	}
})
//這個方法是網上看到噠，直接拿過來用了
const componentsScroll = (el,props) => {
    //在元素上加點私貨，名字隨便取，確保不會和已有屬性重複即可，我取名叫做_ps_
    if (el._ps_ instanceof PScrollbar) {
        el._ps_.update();
    } else {
        //el上掛一份屬性
        el._ps_ = new PScrollbar(el, props);
    }
};
Vue.prototype.setScrollBar = function(){
	this.$nextTick(() => {
		update(this.$el);
	})
},

main.vue（放在app.vue裏面沒用）

mounted(){
    this.setScrollBar();
    window.onresize = () => {
        window.location.reload();
    }
},

悄悄告訴你，onersize時候刷新頁面，可以解決好多自適應問題