<!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. RT-SA-2019-004 Cisco RV320 Unauthenticated Diagnostic DataRetrieval

    Advisory: Cisco RV320 Unauthenticated Diagnostic Data Retrieval RedTeam Pentesting discovered that t ...

  2. oracle的安装与卸载

    安装oracle: 下载符合系统要求的oracle数据库 2.   将上面的压缩文件都解压到一个文件夹中,然后以管理员的身份运行其中的可执行文件(.exe) 3. 配置安全更新(可选可不选,学习时我没 ...

  3. pythonのdjango Session体验

    Session Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认)缓存文件缓存+数据库加密cookie1.数据库Session Django默认支 ...

  4. LeetCode第十二题-将数字转化为罗马数字

    Integer to Roman 问题简介:将输入的int类型数字转化为罗马数字 问题详解:罗马数字由七个不同的符号表示:I,V,X,L,C,D和M 符号-数值 I - 1 V - 5 X -10 L ...

  5. C语言之路-3-循环

    1.while循环计算数字位数 #include<stdio.h> int main() { ; int x; printf("请输入数字:"); scanf(&quo ...

  6. aiohttp使用队列

    获取百度的搜索结果,然后把百度的长链接,获取到真实的url import time import aiofiles import aiohttp import asyncio from lxml im ...

  7. 题解-HNOI2017 抛硬币

    Problem loj2023 题意概述:甲抛掷 \(a\) 次硬币,乙抛掷 \(b\) 次硬币,问有多少种情况甲正面向上的次数比乙多,答案对 \(10^k\) 取模 对于 \(10\%\) 的数据, ...

  8. hadoop的master和slave模式

    hadoop的集群是基于master/slave模式. namenode和jobtracker属于master,datanode和tasktracker属于slave,master只有一个,而slav ...

  9. 微信小程序+java后台

    博主是大四学生,毕业设计做的是微信小程序+java后台.陆陆续续经历了三个月(因为白天要实习又碰上过年玩了一阵子),从对微信小程序一无所知到完成毕设,碰到许多问题,在跟大家分享一下自己的经历和一个小程 ...

  10. 三十分钟学会 Less

    每一门技术的出现都是为了解决现存的问题,同样的,Less 的出现是为了解决 CSS 中过于呆板的写法.Less 官方文档 中对 Less 的使用有详细的介绍,总结一下为:Less = 变量 + 混合 ...