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

àì夳堔傛蜴生んèń 2022-12-05 12:12 912阅读 0赞

#### 前言 ####

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

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDY5NjY0_size_16_color_FFFFFF_t_70_pic_center]

#### 实现思路 ####

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDY5NjY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/92afc4b90df84600bcbd5169b85ef4fd.png