<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Test</title>

     <style>

         table{border-collapse: collapse;}

         th,td{padding: 5px;text-align: center;border:1px solid #999;min-width: 100px;}

         th{background-color: #333;color: #fff;position: sticky;top:0px;}

         td:first-child{background-color: #333;color: #fff;position: sticky;left:0px;}

         th:first-child{position: sticky;left:0px;}

     </style>

     <script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script>

     <script>

         document.addEventListener("DOMContentLoaded",function(){

             let t = new Vue({el:"#t"});

         });

     </script>

 </head>

 <body>

     <table id="t">

         <thead>

             <tr>

                 <th v-for="(n,i) of 50">字段 {{i+1}}</th>

             </tr>

         </thead>

         <tbody>

             <tr v-for="(n,i) of 100">

                 <td v-for="(m,j) of 50">{{j+1}}</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

我也是从网上查来的。这个不仅仅只是可以固定首行首列，还可以固定更多的，只是看自己怎么封装

vue table 固定首列和首行的更多相关文章

  1. excel如何冻结首行或首列及首行首列同时冻结

    冻结首行方法: 首先选择首行,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻结首行即可. 效果如下:拖动垂直滚动条 冻结首列方法: 首先选择首列,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻 ...

  2. vue table已选列数据

    vue Table@on-selection-change="test" 已选中项数据 test(selection){} <Table :data="tableD ...

  3. vue表格实现固定表头首列

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

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

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

  5. 锁定TABLE的首行和首列

    1. 2. 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

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

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

  7. StringGrid 实例1：初始化StirngGrid的首行和首列

    实例1:初始化StirngGrid的首行和首列

  8. 在已创建的DataTable对象中添加在首列一列

    问题描述: 从数据库读取出来的表数据赋给到了DataTable上,将DataTable中数据显示到DataGridView中时希望在DataGridView的第一列显示一列. 解决方法: DataTa ...

  9. excel同时冻结首行和首列怎么操作

    之前ytkah只知道excel可以冻结首行或首列,但还不清楚如何同时冻结excel首行和首列,后面看到小C的报表,问了他才明白怎么操作. 首先,我们先把选中B2单元格,点击导航菜单的“视图” - “冻 ...

随机推荐

  1. 解压unzip的用法

    1.把文件解压到当前目录下 [root@instance-q6z0ksfb xmerge_test]# unzip db1.zip 2.把文件解压到指定的目录下,需要用到-d参数. unzip -d ...

  2. torch.linspace，unsqueeze()以及squeeze()函数

    1.torch.linspace(start,end,steps=100,dtype) 作用是返回一个一维的tensor(张量),其中dtype是返回的数据类型. import torch print ...

  3. Spring Cloud 2-Eureka服务发现注册(一)

    Spring Cloud Eureka  1．服务端配置 pom.xml application.yml Application.java 2．客户端配置 pom.xml application.ym ...

  4. C++设计模式——装饰模式

    前言 在实际开发时,你有没有碰到过这种问题:开发一个类,封装了一个对象的核心操作,而这些操作就是客户使用该类时都会去调用的操作:而有一些非核心的操作,可能会使用,也可能不会使用:现在该怎么办呢? 将这 ...

  5. Innodb和Myisam数据恢复

    (转自)https://www.cnblogs.com/DwyaneTalk/p/4113829.html 背景 这次恢复oracle和sqlserver,想想也不能把mysql落下了吧.三剑合一.都 ...

  6. Linux 运维工作中的经典应用ansible（批量管理）Docker容器技术(环境的快速搭建)

    一 Ansible自动化运维工具 Python 在运维工作中的经典应用 ansible(批量管理操作) .安装ansible(需要bese epel 2种源) wget -O /etc/yum.rep ...

  7. java中的stream的泛型方法的使用示例

    本文章使用jdk8测试 ,并结合使用lambda测试 测试前准备一些测试数据: class ObjectDemo { private Integer id; private String name; ...

  8. 【git】将本地项目上传到远程仓库

    飞机票 一. 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: htt ...

  9. Mysql err 1055

    目录: 错误信息 原因分析 解决方案 操作示例 错误信息 [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause ...

  10. 手把手带你使用JS-SDK自定义微信分享效果

    https://www.cnblogs.com/backtozero/p/7064247.html