vue el-table （固定列+滚动列）【横向滚动条】确定滚动条是在列头还是列尾

效果图：

代码实现：

html：

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app" style="width:820px">
<template><el-tableref="tableRef":data="tableData"borderstyle="width: 100%"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table>
</template>
</div>

css：

@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");

js：

var Main = {mounted(){this.$nextTick(() => {const tableEl = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper')tableEl.addEventListener('scroll', ()=>{const tableWidth = tableEl.offsetWidthconst scrollLeft = tableEl.scrollLeftconst scrollWidth = tableEl.scrollWidthif(scrollLeft === 0){console.log('已滚动到第一列')} else if(Math.round(scrollWidth-tableWidth) === Math.round(scrollLeft)){console.log('已滚动到最后一列')}})})},methods: {handleClick(row) {console.log(row);}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333}]}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')