vue-element-admin我踩的坑（6）

el-table添加监听器的问题

想对table添加横向滚动条的监听器，获取当前的滚动量，做两个表格的同步横向滚动

根据网上的方法添加监听器：

尝试1：

var doms = document.getElementsByClass('el-table')

doms[0].addEventListener('scroll', () => {

    console.log(doms[0].scrollLeft)

})

控制台没有输出

网上在找了一下，看到有说addEventListener要加个参数 true

尝试2：

var doms = document.getElementsByClass('el-table')

doms[0].addEventListener('scroll', () => {

    console.log(doms[0].scrollLeft)

}, true)

这回控制台有输出了，但都是0……，按照网上的说法，可能是dom对象不对，就试试表格数据的div：

尝试3：

var doms = document.getElementsByClass('el-table__body-wrapper')

doms[0].addEventListener('scroll', () => {

    console.log(doms[0].scrollLeft)

}, true)

console又没输出了（╯‵□′）╯︵┴─┴ 掀桌，继续搜索……，发现可以用ref定位对象的方法，

尝试4：

修改el-table标签:<el-table ref="tableA" .... >

var domA = this.$refs.tableA

domA.addEventListener('scroll', () => {

    console.log(domA.scrollLeft)

}, true)

直接报错！ addEventListener is not a function !!!! （╯‵□′）╯︵┴─┴ 掀桌，又捣鼓了半天，搜了好多，尝试了好多次没有的，终于看到这个文章：https://blog.csdn.net/lynxkor/article/details/78069661，于是

尝试5：

var domA = this.$refs.tableA

domA.bodyWrapper.addEventListener('scroll', () => {

    console.log(domA.bodyWrapper.scrollLeft)

}, true)

终于成功了 o(╥﹏╥)o

再改改：

var domA = this.$refs.tableA
var domB = this.$refs.tableB

domA.bodyWrapper.addEventListener('scroll', () => {

    domB.bodyWrapper.scrollLeft = domA.bodyWrapper.scrollLeft

}, true)
domB.bodyWrapper.addEventListener('scroll', () => {

    domA.bodyWrapper.scrollLeft = domB.bodyWrapper.scrollLeft

}, true)

两个滚动条一起走了，完美 d(=^･ω･^=)b