<!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. js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s),使用过程中有以下几点需要注意   js中escape对应的C#解码函数 System.We ...

  2. pythonのsqlalchemy多对多关系

    现在来设计一个能描述“图书”与“作者”的关系的表结构,需求是 一本书可以有好几个作者一起出版 一个作者可以写好几本书 #!/usr/bin/env python from sqlalchemy imp ...

  3. Django之form表单

    https://www.cnblogs.com/liwenzhou/p/8747872.html 1. form组件的介绍 之前web开发的模式,以注册为例: 1. 要有一个注册的页面,页面里面要有f ...

  4. 【原创】Linux基础之curl

    http请求过程如下: # curl -v http://www.baidu.com % Total % Received % Xferd Average Speed Time Time Time C ...

  5. 洛谷P5280 [ZJOI2019]线段树 [线段树，DP]

    传送门 无限Orz \(\color{black}S\color{red}{ooke}\)-- 思路 显然我们不能按照题意来每次复制一遍,而多半是在一棵线段树上瞎搞. 然后我们可以从\(modify\ ...

  6. 《剑指offer》字符串的排列

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  7. 原子动作检测 A Better Baseline for AVA

    本文将Faster-RCNN用在了I3D的feature map上,用于视频中多人多动作的检测 challege比赛第二名的整体方法是将Faster-RCNN作用在I3Dfeature上.训练时,以标 ...

  8. echarts移动端中例子总结。

    接下来我总结一下我常用到的几个移动端echarts小例子: 第一步:我先引入自己想要的库 第二步: 给echarts给了一个窗口(有大小的窗口) 第三步: 开始引入你想要的图形的options 我做的 ...

  9. JWT( JSON Web Token)

    参考  https://laravelacademy.org/post/9469.html 三部分组成,头部.载荷与签名 头部 把下面的基本信息base64 加密生成头部信息 { "typ& ...

  10. if的{}的省略

    if (表达式) 语句; else if(表达式) 语句; else if(表达式) 语句; else 语句; 对应: if (表达式) { 语句1; 语句2; 语句N;//多个语句组成代码块 } e ...