前言

最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问题欢迎评论交流。

效果

思路

要实现固定首行首列

除了使用各种UI框架插件外,那就是自己用原生写啦

首先我们理一下思路

如何固定首行首列呢?

可能每个人有不同的想法

我这里当然介绍的是我自己的想法

那就是把首列表头和表格主内容分割开来,如下图

不过这样虽然固定了表头首列

但还是不能实现我们想要的效果

因为你会发现当你滑动tbody的时候

表头和首列并不会移动

相信聪明的你已经有了解决的办法了

那就是给tbody添加一个滑动监听

滑动的时候会触发事件

引起表头和首列的移动

这就是本文固定表头首列的思路

代码实现

template:

<template>
<div class="pages" ref="pages">
<div class = "content" ref="table">
<!--首列固定-->
<div class = "left-content">
<div class = "table-head">
<table class= "full-table">
<thead>
<tr v-for = "header in tableHeader">
<th class = "firstCol"
v-for = "(b,index) in header"
v-if="index==0">
<p>{{b}}</p>
</th>
</tr>
</thead>
</table>
</div>
<div class="table-left">
<div class = "table"
ref="firstColLayer"
data-_ref="firstColLayer"
>
<table class= "full-table">
<tbody>
<tr v-for="row in dataSheet">
<td v-for="(c,index) in row" v-if="index==0">
<p>{{c}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class = "right-content" ref="right">
<!--首行固定-->
<div class = "table-head"
ref="firstRowLayer"
data-_ref="firstRowLayer">
<table class= "full-table">
<thead>
<tr v-for = "header in tableHeader">
<th
v-for = "(b,index) in header"
v-if="index!=0 && index!=1"
style="width:101px"
>
<p>{{b}}</p>
</th>
</tr>
</thead>
</table>
</div>
<!--正常表格内容(只有表格内容,没有表头和首列)-->
<div class="table"
style="overflow:scroll"
ref="tableContainer"
@scroll="tableDivScroll($event)"
>
<table class="content-table">
<tbody ref="tbody">
<tr v-for="row in dataSheet">
<td v-for="(c,index) in row"
v-if="index!=0 && index!=1"
>
<p>{{c}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>

JavaScript:

<script>
module.exports = (function(that) {
return {
data: function(that) {
const tableHeader = that.dataSheet;
const dataSheet = that.dataSheet;
return {
dataSheet: dataSheet,
tableHeader: tableHeader,
};
},
methods: {
tableDivScroll (event) {
const $target = this.$refs.tableContainer
// 首行固定
this.$refs.firstRowLayer.scrollLeft = $target.scrollLeft
// 首列固定
this.$refs.firstColLayer.scrollTop = $target.scrollTop
},
//定一个生命周期钩子监听变动
mounted:function () {
let maxHeight = window.screen.height
document.body.style.overflow='hidden';
this.$refs.right.style.width=""+this.$refs.table.offsetWidth-107+"px";//这里的减107是减去左侧div宽度
console.log(this.placeholderTop)
}
}
})(this);
</script>

CSS:

<style scoped>
body{
overflow:hidden
}
.pages{
height:100%;
overflow:hidden;
}
.content{
margin-top:73px;
margin-left:17px;
width:100%;
}
.left-content{
width:101px;
float:left;
}
.right-content{
float:left
}
.table-body{
width:100%;
overflow:auto;
}
.table-head{
width:100%;
overflow:hidden;
}
.left-content .table-body{
overflow:hidden;
}
.table-left .table{
height:400px;
background-color:#FFFFFF;
overflow:hidden;
margin-right:0;
padding-right:0;
}
table::-webkit-scrollbar{display:none}
.content-table th, .full-table th{
font-size:14px;
font-family:PingFangSC-Regular;
background:#EAEFF3;
font-weight:400;
color:#176BED;
height:40px;
line-height:40px;
text-align:center;
}
.content-table td, .full-table td {
line-height: 35px;
text-align: center;
word-wrap: break-word;
word-wrap: normal\0;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
th,td p{
width:101px;
display: inline-block;
line-height:14px;
padding:auto 0;
margin:auto 0;
vertical-align: middle;
}
.content-table {
display:block;
background-color:#FFFFFF;
}
thead,tbody{
background-color:#FFFFFF;
}
</style>

Ps:有什么问题可以在评论区一起探讨

vue表格实现固定表头首列的更多相关文章

  1. vue 表格树 固定表头

    参考网上黄龙的表格树进行完善,并添加固定表头等的功能,目前是在iview的项目中实现,如果想在element中实现的话修改对应的元素标签及相关写法即可. <!-- @events @on-row ...

  2. jquery固定表头和列头

    1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(Ta ...

  3. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

  4. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  5. bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...

  6. bootstrap 冻结表格,冻结表头

    需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:ht ...

  7. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  8. H5手机开发锁定表头和首列(惯性滚动)解决方案

    前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...

  9. CSS样式实现表头和列固定

    效果图:第一行和第一列固定       <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...

随机推荐

  1. Quartz学习--二 Hello Quartz! 和源码分析

    Quartz学习--二  Hello Quartz! 和源码分析 三.  Hello Quartz! 我会跟着 第一章 6.2 的图来 进行同步代码编写 简单入门示例: 创建一个新的java普通工程 ...

  2. (Lesson2)根据类名称和属性获得元素-JavaScript面向对象

    描述:在编写选择器的时候遇到的一根问题,我需要实现Jquery的选择器功能,第一个根据ID获取Element非常简单,第二个根据类(class)去获取Element集合,这个相对复杂,而根据name和 ...

  3. Oracle12c中SQL优化(SQL TUNING)新特性之SQL计划指令

    SQL计划指令是Oracle12c中自适应查询优化的功能之一.SQL计划指令就像“额外的提醒” ,用以提醒优化器你先前选择了的计划并不是最优的,典型的是因为错误的势评估.错误的势评估往往是由统计信息缺 ...

  4. dubbo实现原理简单介绍

    一.什么是dubbo   Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,     ...

  5. ASP.NET后台中调用前台Javascript函数的几种方法

    做web开发,用的技术是aspx.net,可是由于比较习惯于ASP现在做起来,觉得非常别扭,原因在于有很多功能其实在前台可以处理的,但是因为用到了很多webcontrol,导致不断postback.如 ...

  6. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  7. 运用BT在centos下搭建一个博客论坛

    在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...

  8. MVC项目中怎么浏览html页面

    public class HomeController : Controller { public ActionResult Index() { //return View(); //return R ...

  9. 连续查询(Continuous Queries)

    当数据超过保存策略里指定的时间之后,就会被删除.如果我们不想完全删除掉,比如做一个数据统计采样:把原先每秒的数据,存为每小时的数据,让数据占用的空间大大减少(以降低精度为代价). 这就需要Influx ...

  10. BZOJ_3879_SvT_后缀数组+单调栈

    BZOJ_3879_SvT_后缀数组+单调栈 Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个 ...