使用elementui的table，固定前三行（这个几行可以自己自定义），其余的都从下往上无间隙滚动

1.固定前三行。
解决办法：使用两个table，第一个table只显示前三行，其余的隐藏，第二个table隐藏前三行，其余的都显示，这样就做到了固定
2.除了前三行固定，其余的都滚动。
解决办法：2-1.可以使用vue-seamless-scroll这个无缝滚动插件，本人测试过时可以使用的，有需要请看链接https://blog.csdn.net/tianbushengyinuo/article/details/108245275
解决办法：2-2.可以使用自定义的js滚动，因为我开发的这个项目是看板，功能是：当一个页面的表格滚动完后，要立刻请求另外的数据，所以要判断页面滚动到底部的时候，我网上找了很多，包括vue-seamless-scroll这个无缝滚动插件也没有判断滚动到底部的情况，所以本人使用了js原生来开发，下面讲解第二种方法

步骤1.html代码
<template>

<div>
    <div class="">
        <el-table
            border
            :cell-style="{ textAlign: 'center', color: '#333333', fontSize: '34px', height: '100%', backgroundColor: '#E1F6FF' }"
            :header-cell-style="{
                textAlign: 'center',
                color: '#000000',
                fontWeight: '400',
                fontSize: '40px',
                height: '100%',
                padding: '0px !important',
                backgroundColor: '#EEEEEE'
            }"
            :row-style="getRowStyle"
            resizable
            :data="tableData"
        >
            <el-table-column label="班次">
                <template slot-scope="scope">
                    <span>{{ scope.row.dayTerm }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类别">
                <template slot-scope="scope">
                    <span>{{ scope.row.groupType }}</span>
                </template>
            </el-table-column>
            <el-table-column label="班组" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.groupName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="责任人" width="130">
                <template slot-scope="scope">
                    <span>{{ scope.row.managerName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="月累计效能" width="250">
                <template slot-scope="scope">
                    <span>{{ scope.row.monthSum }}</span>
                </template>
            </el-table-column>
            <el-table-column label="大前天效能" width="250">
                <template slot-scope="scope">
                    <span>{{ scope.row.beforeThreeDays }}</span>
                </template>
            </el-table-column>
            <el-table-column label="前天效能" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.beforeYesterday }}</span>
                </template>
            </el-table-column>
            <el-table-column label="昨天效能" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.yesterday }}</span>
                </template>
            </el-table-column>
            <el-table-column label="昨天排名" width="200">
                <template slot-scope="scope">
                    <i :class="scope.row.yesterdayRanking"></i>
                </template>
            </el-table-column>
            <el-table-column label="环比昨天" width="200">
                <template slot-scope="scope">
                    <i :class="scope.row.compareIcon"></i>
                    <span>{{ scope.row.comBeforeYesterday }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div id="divHeight" @mouseenter="mEnter" @mouseleave="mLeave" class="">
            <el-table
                border
                :cell-style="{ textAlign: 'center', color: '#333333', fontSize: '34px', height: '100%' }"
                :header-cell-style="{
                    textAlign: 'center',
                    color: '#000000',
                    fontWeight: '400',
                    fontSize: '40px',
                    height: '100%',
                    padding: '0px !important',
                    backgroundColor: '#EEEEEE'
                }"
                :row-style="getRowStyle1"
                :show-header="false"
                style="margin-top: 0;height: 415px;"
                resizable
                :data="tableData1"
            >
                <el-table-column label="班次">
                    <template slot-scope="scope">
                        <span>{{ scope.row.dayTerm }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类别">
                    <template slot-scope="scope">
                        <span>{{ scope.row.groupType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班组" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.groupName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="责任人" width="130">
                    <template slot-scope="scope">
                        <span>{{ scope.row.managerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="月累计效能" width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.monthSum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="大前天效能" width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.beforeThreeDays }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="前天效能" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.beforeYesterday }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="昨天效能" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.yesterday }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="昨天排名" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.yesterdayRanking }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="环比昨天" width="200">
                    <template slot-scope="scope">
                        <!-- 为自定义的图标 -->
                        <i :class="scope.row.compareIcon"></i>
                        <span>{{ scope.row.comBeforeYesterday }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>

</template>

步骤2.js代码
<script>
export default {

name: 'attendance_black',
data: function() {
    return {
        tableData1: [],
        tableData: [],
        n: 1,
        divHeight: null,
        timer1: null,
        animate: false,
        clientHeight: null
    };
},
created() {
    this.getList();
},
mounted() {
    // 当页面渲染完后，开始滚动
    this.$nextTick(() => {
        this.timer1 = setInterval(this.scroll, 500);
    });
},
methods: {
    // 第一个表格显示前三行，隐藏其余行
    getRowStyle({ row, rowIndex }) {
        if (rowIndex > 2) {
            return { display: 'none' };
        } else {
            return {};
        }
    },
    // 第二个表格隐藏前三行，显示其余行
    getRowStyle1({ row, rowIndex }) {
        if (rowIndex > 2) {
            return { marginTop: '0px' };
        } else {
            return { display: 'none' };
        }
    },
    // 获取数据
    getList() {
        // 自定义后台返回的数据，
        let data = [];
        for (let i = 0; i < 20; i++) {
            data[i] = {};
            data[i] = {
                beforeThreeDays: null,
                beforeYesterday: null,
                comBeforeYesterday: null,
                dayTerm: null,
                departmentId: null,
                departmentName: null,
                groupName: null,
                groupType: null,
                managerId: null,
                managerName: null,
                monthSum: null,
                yesterday: null,
                yesterdayRanking: ''
            };
        }
        data[0].yesterdayRanking = 'el-icon-my-one';
        data[1].yesterdayRanking = 'el-icon-my-two';
        data[2].yesterdayRanking = 'el-icon-my-three';
        data[3].yesterdayRanking = '1';
        data[4].yesterdayRanking = '2';
        data[5].yesterdayRanking = '3';
        for (let i = 0; i < data.length; i++) {
            data[i].comBeforeYesterday = i;
            data[i].compare = 2;
            if (data[i].comBeforeYesterday > data[i].compare) {
                data[i].compareIcon = 'el-icon-my-topA';
            } else {
                data[i].compareIcon = 'el-icon-my-bottomA';
            }
        }
        this.tableData = data;
        this.tableData1 = data;
    },
    // 页面滚动
    scroll() {
        this.animate = true;
        this.n += 1;
        // 第一个和第二个table的总高度
        let con1 = document.getElementsByClassName('el-table__body')[1];
        // 如果不是当前页面，就清除定时器
        if (!con1) {
            clearInterval(this.timer1);
        } else {
            // 第二个table的高度
            let divHeight = document.getElementById('divHeight');
            // 添加滚动动画的类名
            con1.classList.add('anim');
            // 添加滚动的距离
            con1.style.marginTop = `-${8 * this.n}px`;
            // 判断滚动的距离是否大于父级容器-子级容器（即是隐藏的表格部分）
            if (8 * this.n >= con1.offsetHeight - divHeight.offsetHeight) {
                clearInterval(this.timer1);
                setTimeout(() => {
                    // 当页面滚动到底部后，跳转到另一个页面
                    // this.$router.push('/operation');
                }, 1000);
            }
        }
    },
    // 当鼠标移入后清除定时器
    mEnter() {
        clearInterval(this.timer1);
    },
    // 当鼠标移出后，开启定时器
    mLeave() {
        let con1 = document.getElementsByClassName('el-table__body')[1];
        let divHeight = document.getElementById('divHeight');
        if (8 * this.n >= con1.offsetHeight - divHeight.offsetHeight) {
            clearInterval(this.timer1);
        } else {
            this.timer1 = setInterval(this.scroll, 500);
        }
    }
}

};
</script>

步骤三，由于时间关系，初学者就不多说了，相信大神的你们肯定会改进的比我这个更好的，