表格同步滚动

1.利用ref获取dom元素会快

2.$forceUpdate强制刷新

<div class="mxb-left-con js-mxb-left-con" ref="jsDfMxbLeftCon">
    <table>
        <tbody>
        <tr v-for="(item,index) in dataListDf" @mouseover="mxbtdmouseover(item)"
            @mouseout="mxbtdmouseout(item)" :class="{'mxb-hover': item.isMxbHover}">
            <td class="jbxxb-td-left" v-text="item.name" :title="item.name"></td>
            <td class="jbxxb-td-left" v-text="item.sqbm" :title="item.sqbm"></td>
            <td class="jbxxb-td-left" v-text="item.hzj" :title="item.hzj"></td>
        </tr>
        </tbody>
    </table>
</div>

// 循环添加isMxbHover字段
_this.dataList.forEach(function (item) {
    item.isMxbHover = false;
});

在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。

但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的

$forceUpdate具有强制刷新的作用

// 鼠标划过时添加class
mxbtdmouseover: function (item) {
    item.isMxbHover = true;
    this.$forceUpdate();
},
// 鼠标移除时去除class
mxbtdmouseout: function (item) {
    item.isMxbHover = false;
    this.$forceUpdate();
},

3.同步滚动

<div class="mxb-left"
     @mouseenter="mouseenterHandler('left')"
     @mouseleave="mouseleaveHandler('left')">
</div>

<div class="mxb-right"
     @mouseenter="mouseenterHandler('right')"
     @mouseleave="mouseleaveHandler('right')">
</div>

// 鼠标划入事件
mouseenterHandler: function (name) {
    this[ name + 'ScrollFlag'] = true;
},
// 鼠标划出事件
mouseleaveHandler: function (name) {
    this[ name + 'ScrollFlag'] = false;
},
// 同步滚动
zyScrollEvent: function () {
    // 获取左侧表格内容部分
    var mxbLeft = this.$refs.jsMxbLeftCon;
    // 获取右侧表格内容部分
    var mxbRight = this.$refs.jsMxbRightCon;
    // 左侧表格和右侧表格同步滚动
    mxbLeft.removeEventListener('scroll', this.scrollLeftHandler);
    // 左侧表格和右侧表格同步滚动
    mxbRight.removeEventListener('scroll', this.scrollRightHandler);
    // 左侧表格和右侧表格同步滚动
    mxbLeft.addEventListener('scroll', this.scrollLeftHandler);
    // 左侧表格和右侧表格同步滚动
    mxbRight.addEventListener('scroll', this.scrollRightHandler);
},
// 滚动左边的处理函数
scrollLeftHandler: function () {
    // 如果是左边滚动的，那么需要设置右边区域的滚动条
    if (this.leftScrollFlag){
        // 获取右侧表格内容部分
        this.$refs.jsMxbRightCon.scrollTop = this.$refs.jsMxbLeftCon.scrollTop;
    }
},
// 滚动右边的处理函数
scrollRightHandler: function () {
    // 如果是左边滚动的，那么需要设置右边区域的滚动条
    if (this.rightScrollFlag){
        // 获取右侧表格内容部分
        this.$refs.jsMxbLeftCon.scrollTop = this.$refs.jsMxbRightCon.scrollTop;
        // 获取右侧表格头部
        this.$refs.jsMxbRightHeaderCon.scrollLeft = this.$refs.jsMxbRightCon.scrollLeft;
        // 获取右侧表格底部
        this.$refs.jsMxbRightFooterCon.scrollLeft = this.$refs.jsMxbRightCon.scrollLeft;
    }
},