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时候刷新页面,可以解决好多自适应问题

发布了15 篇原创文章 · 获赞 3 · 访问量 6536

猜你喜欢

转载自blog.csdn.net/yushiershi/article/details/93851511