vue移动端表格吸顶、行自适应高度、列左侧固定悬浮

简介

1.表头吸顶效果
2.左侧列固定，右侧滑动，表头跟随内容滑动
3.行高自适应

番外

最近上海疫情，居家办公一月多了，愿阴霾散去。最近网上在正常得市民抱怨中，有很多别有用心之人，数典忘祖，造谣生事，其心可诛。

如图所示

源码（复制另存txt，修改.html直接运行）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="referrer" content="no-referrer" /><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" /><title>vue移动端表格吸顶、列自适应高度、列左侧固定悬浮</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>/* 页面所需样式 */html,body,#app {width: 100%;}.cardBox {border-radius: 8px;}.tableBox {border: 1px solid #EBECF0;border-radius: 4px;color: #494949;}.right {overflow-x: auto;}.tableHead {background: #E8EDFF;height: 32px;line-height: 32px;}.borderBottom {border-bottom: 1px solid #EBECF0;}.width100 {width: 100px;}.width70 {width: 70px;}.width40 {width: 40px;}.colorff {color: #ff0000;}.color00 {color: #00d7a2;}.fw500 {font-weight: 500}.icon {width: 20px;height: 20px;transition: all 0.1s;}.icon-active {width: 20px;height: 20px;color: yellow;transform: rotate(180deg);transition: all 0.1s;}</style>
</head><body style="background: #eee;"><div id="app" class="pt10"><div class="cardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16"><div class="fz14 fw color3 pmps mb12 ml12">vue移动端表格吸顶、<br />列自适应高度、<br />列左侧固定悬浮</div><!-- 浮动头部 start --><div class="tableBox flex w100" style="position: sticky;top:0px;z-index:5;border-radius: 4px 4px 0 0;"><!-- 左侧固定列 --><div class="fz12 lh20 flex"><div class="tl fw pmps tableHead pl10 borBox pr10" style="max-width:140px">游戏类型</div><div class="fw pmps tableHead borBox pr10 tl" style="width:80px">姓氏名谁</div><div class="fw pmps tableHead borBox pr10 tl" style="width:75px">中级技能</div></div><!-- 右侧滚动区域 --><div class="txtno right flex1" @scroll="divScroll" ref="rightBoxHead"><div class="flex fz12 pmps tr fw" style="width:max-content"><div class="tableHead width40" style="line-height:15px;">指标<br />环比</div><div class="tableHead width70">日<span class="fz12 color6 fbf">（千）</span></div><div class="tableHead width70">日环</div><div class="tableHead width70">月<span class="fz12 color6 fbf">（千）</span></div><div class="tableHead width70">月环</div><div class="tableHead width70">年<span class="fz12 color6 fbf">（千）</span></div></div></div></div><!-- 浮动头部 end --><div class="tableBox flex w100" style="border-radius: 0 0 4px 4px;"><!-- 左侧固定列 --><div class="fz12 lh20 flex"><div><div v-for="(item ,i) in typeList" :key="i" :style="{height:item.height}"style="max-width:140px" class="prps pl10 borBox pr10 pt5 pb5":class="{borderBottom:i != typeList.length - 1}">{{item.businessPart}}</div></div><div><!-- 姓氏名谁 默认只有此列数据可能换行，其他列数据固定 --><!-- :ref="'leftRef'+i"和:style="{height:item.height}" 用来计算可能存在得换行数据高度/动态赋值 --><div v-for="(item ,i) in typeList" :key="i" :style="{height:item.height}" :ref="'leftRef'+i"style="width:80px" class="prps borBox pt5 pb5 tl":class="{borderBottom:i != typeList.length - 1}">{{item.businessLine}}</div></div><div><div v-for="(item ,i) in typeList" :key="i" :style="{height:item.height}" style="width:75px"class="prps borBox pt5 pb5 tl" :class="{borderBottom:i != typeList.length - 1}">{{item.childBusiness}}</div></div></div><!-- 右侧滚动区域 --><div class="txtno right flex1" @scroll="divScroll" ref="rightBoxContent"><div class="flex fz14 pmps tr fw lh20" v-for="(item ,i) in typeList" :key="i":style="{height:item.height}" style="width:max-content"><div class="width40 pt5 pb5 borBox" :style="{height:item.height}":class="[i == typeList.length - 1?'':'borderBottom']"><span v-if="parseFloat(item.indicatorRate)":class="[parseFloat(item.indicatorRate) > 0? 'colorff':'color00']">{{item.indicatorRate}}</span><span v-else>0</span></div><div class="width70 pt5 pb5 borBox" :style="{height:item.height}":class="{borderBottom:i != typeList.length - 1}">{{item.dayValue}}</div><div class="width70 pt5 pb5 borBox" :style="{height:item.height}":class="[i == typeList.length - 1?'':'borderBottom']"><span v-if="parseFloat(item.dayRate)":class="[parseFloat(item.dayRate) > 0? 'colorff':'color00']">{{item.dayRate}}</span><span v-else>0</span></div><div class="width70 pt5 pb5 borBox" :style="{height:item.height}":class="{borderBottom:i != typeList.length - 1}">{{item.monthValue}}</div><div class="width70 pt5 pb5 borBox" :style="{height:item.height}":class="[i == typeList.length - 1?'':'borderBottom']"><span v-if="parseFloat(item.monthRate)":class="[parseFloat(item.monthRate) > 0? 'colorff':'color00']">{{item.monthRate}}</span><span v-else>0</span></div><div class="width70 pt5 pb5 borBox" :style="{height:item.height}":class="{borderBottom:i != typeList.length - 1}">{{item.yearValue}}</div></div></div></div><div class="w100 pt5 flex justc alic" v-if='typeList.length != 0' @click="showMore"><span class="fz12 color6 lh20">{{isActiveMore?'收起':'查看更多'}}</span><img style="pointer-events:auto"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdklEQVRoQ+2WP2rDMBjFJWzPHQs5QE8QumfJRWywlvYKTa7QLDLYF8mSvfQEPUCgY2bbuAgsCAY51veHYvi82t/T+70nCWu18kev3L8SgP9uUBqQBpAJyBZCBogelwbQESIFpAFkgOhxaQAdIVJAGpgLsKqqD/e+LMsjMujgOFsDo/nDuPKBC4IFYGLep8cCQQ4QMM8GQQrwwDwLBBlAwPxtdP00OYVk24kEIGQ+SZK9M973/VkpxQKBBpgzXxTFlwOo6/qVCwIFsMS83zpcEGCAGPOcECAAiHkuiGgAjHkOiCgAa+2b1vpzciXe3G3jD+zSf57QmRiG4d0Yc1qqEwXQNM2m67qLUuplXABkfqaJnzRNd3meX1kAnOgdxDMk+amxuyZ+Y807ragG/OIOom3bjTHme2lSc99Za7dZll1jkvd6IAAK01QaAkCVJFRHGoAmRzUnDVAlCdWRBqDJUc1JA1RJQnWkAWhyVHPSAFWSUJ3VN/AHyEyuMZ39T8kAAAAASUVORK5CYII="alt="icon" :class="[isActiveMore?'icon':'icon-active','inline']" /></div><div class="tl color6 fz12 mt10 ml12">疫情在家三十多天了，好家伙，我想出去玩！</div><div v-if='typeList.length == 0' class="tc color6 fz14 mt10">暂无数据</div></div></div>
</body><script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<!-- 引入 echart -->
<!-- <script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script> --><script>let timer = ''new Vue({el: '#app',data() {return {typeAllList: [{businessLine: "蛮王",businessPart: "英雄联盟",childBusiness: "开大招",dayRate: "-10.0%",dayValue: "10.0",indicatorRate: "0/1",monthRate: "10.0%",monthValue: "10.0",order: 220,yearValue: "10.0",},{businessLine: "亚索",businessPart: "英雄联盟",childBusiness: "疾风剑豪",dayRate: "10.0%",dayValue: "220.0",indicatorRate: "0/1",monthRate: "10.0%",monthValue: "330.0",order: 4440,yearValue: "20.0",},{businessLine: "EZ说他最帅可以换行",businessPart: "英雄联盟",childBusiness: "星传说",dayRate: "60.0%",dayValue: "60.0",indicatorRate: "0/1",monthRate: "60.0%",monthValue: "60.0",order: 660,yearValue: "60.0",},],typeList: [],isActiveMore: false,}},created() {// 初始化数据Array.from({ length: 30 }).map(() => {this.typeAllList.push({businessLine: "火影忍者",businessPart: "木叶村",childBusiness: "影分身",dayRate: "160.0%",dayValue: "160.0",indicatorRate: "0/1",monthRate: "160.0%",monthValue: "160.0",order: 1660,yearValue: "160.0",})})// 根据激活项，是否展示更多数据，默认展示8条if (this.isActiveMore) {this.typeList = this.typeAllList} else {this.typeList = this.typeAllList.length > 0 ? this.typeAllList.slice(0, 8) : []}},mounted() {// 延迟获取每一行高度setTimeout(() => {this.$nextTick(() => {this.typeList.map((item, i) => {this.getHeight(i)//动态读取每一项高度})this.typeList = [...this.typeList]})}, 500)},methods: {//展示更多showMore() {this.isActiveMore = !this.isActiveMoreif (this.isActiveMore) {this.typeList = this.typeAllList} else {this.typeList = this.typeAllList.length > 0 ? this.typeAllList.slice(0, 8) : []}this.$nextTick(() => {this.typeList.map((item, i) => {this.getHeight(i)})this.typeList = [...this.typeList]})},//滚动条divScroll(event) {if (timer) {window.clearTimeout(timer)timer = ''}timer = window.setTimeout(() => {this.$refs.rightBoxContent.scrollLeft = event.target.scrollLeftthis.$refs.rightBoxHead.scrollLeft = event.target.scrollLeft}, 10)},//动态获取高度getHeight(i) {// console.dir(this.$refs['leftRef2'][0])this.typeList[i].height = this.$refs['leftRef' + i][0].offsetHeight + 'px'}}})
</script><style>@charset "utf-8";/* CSS Document 公共样式表*/html,body {height: 100%;width: 100%;word-wrap: break-word;}.w50 {width: 50%;}.w100 {width: 100%;}* {margin: 0;padding: 0;outline: none;}.tc {text-align: center}.tl {text-align: left;}.tr {text-align: right}.vm {vertical-align: middle;}.fl {float: left;}.fr {float: right;}.fz26 {font-size: 26px;}.fz25 {font-size: 25px;}.fz24 {font-size: 24px;}.fz22 {font-size: 22px;}.fz20 {font-size: 20px;}.fz18 {font-size: 18px;}.fz16 {font-size: 16px;}.fz14 {font-size: 14px;}.fz12 {font-size: 12px;}.fz11 {font-size: 11px;-webkit-transform: scale(0.85);transform: scale(0.85);display: inline-block;}.fz10 {font-size: 10px;-webkit-transform: scale(0.8);transform: scale(0.8);display: inline-block;}.fw {font-weight: 600;}.fw4 {font-weight: 400;}.fwB {font-weight: bold;}.mr5 {margin-right: 5px}.mr10 {margin-right: 10px}.mr12 {margin-right: 12px}.mr15 {margin-right: 15px}.mr20 {margin-right: 20px}.ml5 {margin-left: 5px;}.ml10 {margin-left: 10px;}.ml12 {margin-left: 12px;}.ml15 {margin-left: 15px;}.ml20 {margin-left: 20px;}.mt40 {margin-top: 40px;}.mt20 {margin-top: 20px;}.mt15 {margin-top: 15px;}.mt12 {margin-top: 12px;}.mt10 {margin-top: 10px;}.mt5 {margin-top: 5px;}.mt3 {margin-top: 3px;}.mt7 {margin-top: 7px;}.mb5 {margin-bottom: 5px;}.mb10 {margin-bottom: 10px;}.mb12 {margin-bottom: 12px;}.mb15 {margin-bottom: 15px;}.mb20 {margin-bottom: 20px;}.pt5 {padding-top: 5px;}.pt10 {padding-top: 10px;}.pt12 {padding-top: 12px;}.pt15 {padding-top: 15px;}.pt20 {padding-top: 20px;}.pb5 {padding-bottom: 5px;}.pb10 {padding-bottom: 10px;}.pb12 {padding-bottom: 12px;}.pb15 {padding-bottom: 15px;}.pb20 {padding-bottom: 20px;}.pl5 {padding-left: 5px;}.pl10 {padding-left: 10px;}.pl12 {padding-left: 12px;}.pl15 {padding-left: 15px;}.pl20 {padding-left: 20px;}.pr5 {padding-right: 5px;}.pr10 {padding-right: 10px;}.pr12 {padding-right: 12px;}.pr15 {padding-right: 15px;}.pr20 {padding-right: 20px;}.bgf {background: #fff;}.bgea {background: #EAEAEA;}.bgF3 {background: #5377F3;}.bg48 {background: #F2B448;}.bgA2 {background: #00D7A2;}.bgF4 {background: #FFFBF4;}.bgFb {background: #EEFFFB;}.bgs {box-shadow: 0px 0px 15px #eee;}.colorF {color: #fff;}.color3 {color: #333;}.color6 {color: #666;}.color9 {color: #999;}.color49 {color: #494949;}.color80 {color: #808080;}.colorA5 {color: #A5A5A5}.colorb {color: blue}.colorF3 {color: #5377F3;}.color48 {color: #F2B448;}.colorA2 {color: #00D7A2;}.color00 {color: #FF0000}.color26 {color: #FFA926;}.lh20 {line-height: 20px;}.lh22 {line-height: 22px;}.lh24 {line-height: 24px;}.lh30 {line-height: 30px;}.lh36 {line-height: 36px;}.lh40 {line-height: 40px;}.lh50 {line-height: 50px;}.lh60 {line-height: 60px;}.hide {display: none}.show {display: block}.inline {display: inline-block;}.indent2 {text-indent: 2em;}.txt2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.txt3 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.txtno {white-space: nowrap;}/*不换行*/.txtsa {text-align: justify;text-align-last: justify;}/*文字分散对齐*/.wn {white-space: nowrap;}.flex {display: flex;}.flex1 {flex: 1;}.colu {flex-direction: column;}.justc {justify-content: center;}.justs {justify-content: space-between}/*两端对齐*/.justsa {justify-content: space-around}/*分散对齐*/.juste {justify-content: flex-end;}.alic {align-items: center}.wrap {flex-wrap: wrap}.childEnd {align-self: flex-end;}.posAbs {position: absolute;}.posRel {position: relative;}.posFix {position: fixed;}.top0 {top: 0;}.bottom0 {bottom: 0;}.left0 {left: 0;}.right0 {right: 0;}.w100 {width: 100%}.h100 {height: 100%}.border0 {border: 0}.borBox {box-sizing: border-box;}.borderte0 {border-top: 1px solid #e0e0e0;}.borderbe0 {border-bottom: 1px solid #e0e0e0;}.borRad {border-radius: 5px;}.borRad50 {border-radius: 50%;}.over {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.overH {overflow: hidden}.overS {overflow: scroll;}.clear {zoom: 1;}.clear:after {content: "\0020";display: block;height: 0;clear: both;}.mask {width: 100%;height: 100%;background: rgba(20, 20, 20, 0.5);position: fixed;z-index: 5;top: 0;left: 0;}.cursor {cursor: pointer;}.noClick {pointer-events: none;}li {list-style: none;}a {text-decoration: none;color: #555;}a:hover {color: #555;}img {display: block;vertical-align: middle;}a img,fieldset {border: 0;}i,em {font-style: normal}input,textarea,select {outline: none;}textarea {resize: none;}table {border-collapse: collapse;}[v-cloak] {display: none;}/* 公用字体 start */.psps {font-family: PingFangSC-Semibold, PingFang SC;}.pmps {font-family: PingFangSC-Medium, PingFang SC;}.fbf {font-family: FinFont-Bold, FinFont;}.prps {font-family: PingFangSC-Regular, PingFang SC;}/* 公用字体 end */
</style></html>

vue移动端表格吸顶、行自适应高度、列左侧固定悬浮相关推荐

vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
用VBA得到EXCEL表格中的行数和列数
用VBA得到EXCEL表格中的行数和列数每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count ActiveShe ...
计算机excel中行高在哪里,电脑Excel表格怎么对行高和列宽进行调整
电脑Excel表格怎么对行高和列宽进行调整腾讯视频/爱奇艺/优酷/外卖充值4折起在我们使用Excel表格处理数据的时候,我们经常需要调整行高和列宽,今天小编就告诉大家电脑Excel表格怎么对行高 ...
(转贴)用VBA得到EXCEL表格中的行数和列数
<script type="text/javascript"></script> <script src="http://pagead2.g ...
一列对应右侧几行html,css查找表格第几行第几列
css查找表格第几行几列说明:利用ntn-child(n)选择器进行实现.其中n代表选择元素中的第几个元素,第几个就写几,特殊的,要选中第一个可以写为: first-child ,要选中最后一个可写 ...
matlab excel 单元居中,用matlab如何识别excel里的单元格是否为合并单元格|excel表格怎么调整行高和列宽...
用matlab合并excel表格文件没看明白你换一种表述说说 matlab怎么合并excel单元格并赋值? 需要确切地说明一下:matlab导入默认是double型的,小数点后至以保留15位.你不 ...
excel表格怎么调整行高和列宽_wps表格课程08|调整行高列宽
本课程由菜鸟在线教育独家出品,未经授权严禁用于商业用途,侵权必究客服微信:13264012523 调整行高列宽是表格内容布局的必备技能. 方法/步骤￭调整行高/列宽的最基础办法是:将鼠标定位到行 ...
【HTML 教程系列第 19 篇】HTML 表格中的行合并与列合并
这是[HTML 教程系列第 19 篇],如果觉得有用的话,欢迎关注专栏. 在使用 Excel 的时候,会经常的用到合并单元格,而在 HTML 的表格中,有时我们也需要将横向的多个单元格或者纵向的多个单 ...

vue移动端表格吸顶、行自适应高度、列左侧固定悬浮

简介

番外

如图所示

源码（复制另存txt，修改.html直接运行）

vue移动端表格吸顶、行自适应高度、列左侧固定悬浮相关推荐

最新文章

热门文章