饿了么element滚动条elScrollbar的使用（包含在el-table中的使用）

简介

由于项目需要统一滚动条样式有需要兼容ie,之前有用过一款滚动条插件，但是有点儿卡，而且数据更新需要自己重置，又刚好在elment官网看到了饿了么自带的滚动条样式比较友好，就想把他扣下来，搜索之后原来element-ui有这个滚动条的组件，只是文档里面没有，经使用验证可以兼容到ie10，而且可以很好的DIY样式，更不用每次更新数据就需要重置什么的，目前体检最好用的一款滚动条插件。后面如果有更好的解决方案会持续更新。

<el-scrollbar></el-scrollbar>

elment组件地址： https://element.eleme.cn/#/zh-CN/component/installation

引用

比较懒的可以直接安装全部

// 安装
npm install 'element-ui' --save

引用element-ui

// 引用
import ElementUI from "element-ui";

Vue.use(ElementUI, {
    size: "medium", // set element-ui default size
});

按需加载的同学可以只引用滚动条组件

// 引用
import ElScrollbar from "element-ui/lib/scrollbar";

Vue.use(ElScrollbar);

基本使用

el-scrollbar默认是隐藏的，需要设置未默认显示，颜色，宽度可以自行DIY。

  <el-scrollbar style="height:300px;width:200px;">
    <div style="height:500px">
      你好，同学！！！
    </div>
  </el-scrollbar>
  //css设置默认显示滚动条
 .el-scrollbar__bar {
    opacity: 1;
 }

效果

只显示横向滚动条

.el-scrollbar__wrap{
	overflow-y: hidden;
}
.el-scrollbar__bar.is-vertical {
	display: none;
}

效果

只显示纵向滚动条

.el-scrollbar__wrap{
	overflow-x: hidden;
}
.el-scrollbar__bar.is-horizontal {
	display: none;
}
   

在el-table中使用滚动条

在el-table中使用这个滚动条现在我的方案是自己写一个表头，设置show-header为false把el-table的表头隐藏，表头对齐自己可以微调。

<el-table
	:data="[]"
	stripe
	style="width: 100%">
	<el-table-column
		tooltip-effect="dark"
		show-overflow-tooltip
		prop="compName"
		label="名称"
                >
	</el-table-column>
	<el-table-column
		prop="compIp"
		label="ip">
	</el-table-column>
</el-table>
<el-scrollbar style="max-height:300px;">
	<el-table
		:data="tableData"
		:show-header="false"
		stripe
		style="width: 100%">
		<el-table-column
			tooltip-effect="dark"
			show-overflow-tooltip
			prop="compName"
			label="名称"
	                >
		</el-table-column>
		<el-table-column
			prop="compIp"
			label="ip">
		</el-table-column>
	</el-table>
</el-scrollbar>
   

效果

滚动条置底

组件

<el-scrollbar ref="selfScrollbar"  style="height: 600px"></el-scrollbar>

方法

selfScrollDown() {
        this.$refs['selfScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight;
 }

调用
页面渲染结束时调用，或者自己加延时

updated: function() {
      this.selfScrollDown()
    }

效果