vue表格实现固定表头和首列-蒲公英云

vue表格实现固定表头和首列

前言

前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，抄个什么劲？有意义？？？
没办法，只有自己写一个了。

效果图

在这里插入图片描述

实现思路

1、首先分为四部分，左上角固定不动的表头，表头部分，首列部分，表格主体部分
2、整个表格添加定位position: relative；左上角表头添加position: fixed;
3、给白色主体部分添加滚动监听事件，在滑动的同时，使首列的scrollLeft等于主体部分的scrollLeft值；使表头的scrollTop值等于主体的scrollTop值；
4、完事，觉得可以就点个赞吧！

不多说，完整代码如下，拿去即用

<template>
    <div class="pages">
        <div class="tables">
            <div class="tits">
                <div class="titsLeft"><p>左上角</p></div>
                <div class="titsRight" ref="titsRight">
                    <div>
                        <p v-for="(item, i) in 50" :key="i">表头{
   { i + 1 }}</p>
                    </div>
                </div>
            </div>
            <div class="tbody">
                <div class="tbodyLeft" ref="tbodyLeft">
                    <div>
                        <p v-for="(item, i) in 50" :key="i">首列{
   { i + 1 }}</p>
                    </div>
                </div>
                <div class="tbodyRight" @scroll="scrollEvent($event)" ref="tbodyRight">
                        <div v-for="(item, i) in 50" :key="i" class="row">
                            <p v-for="(item1, i1) in 50" :key="i1">{
   { i + 1 }}-{
   { i1 + 1 }}</p>
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'tables',
    data() {
        return {};
    },
    methods: {
        scrollEvent(e) {
            let tbodyRightScrollLeft = e.target.scrollLeft;
            let tbodyRightScrollTop = e.target.scrollTop;
            this.$refs.titsRight.scrollLeft = tbodyRightScrollLeft;
            this.$refs.tbodyLeft.scrollTop = tbodyRightScrollTop;
        }
    }
};
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}
p {
    width: 50px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    flex-shrink: 0;
}
.tables {
    width: 310px; //自定义表格整体宽度
    font-size: 12px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
    .tbody{
        height: 400px; //自定义表格内容高度
    }
    > div {
        display: flex;
    }
    div {
        flex-shrink: 0;
    }
    .tits {
        height: 40px;
        padding-left: 60px;
    }
    .titsLeft,
    .tbodyLeft {
        width: 60px;
    }
    .titsRight,
    .tbodyRight {
        width: 250px; //自定义表头表体内容宽度
    }
    .titsLeft {
        position: fixed;
        top: 0;
        left: 0;
        p {
            width: 60px;
            background-color: orange;
        }
    }
    .titsRight {
        overflow: hidden;
        white-space: nowrap;
        background-color: pink;
        div {
            width: 500px;
            height: 400px;
            display: flex;
        }
    }
    .tbodyLeft {
        overflow: hidden;
        white-space: nowrap;
        background-color: pink;
        div {
            width: 50px;    
        }
    }
    .tbodyRight {
        overflow: hidden;
        overflow: auto;
        white-space: nowrap;
        background-color: none;
        display: flex;
        flex-direction: column;
            .row {
                display: flex;
            }
            > :nth-child(2n+1) {
                p{
                    //background-color:#ccc;
                }
            }
    }
}
</style>