<!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. Coursera, Big Data 3, Integration and Processing (week 1/2/3)

    This is the 3rd course in big data specification courses. Data model reivew 1, data model 的特点: Struc ...

  2. 3.让linux 增加 wget 命令

    Wget主要用于下载文件,在安装软件时会经常用到   直接执行命令 : sudo yum -y install wget   就可以使用wget了

  3. vue组件化的应用

    前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个 ...

  4. 常用window命令

    1.  关闭端口占用程序 先查看端口(8080)占用程序 netstat -ano | findstr 显示结果如下 TCP 0.0.0.0:8080 0.0.0.0:0 LISTENING 1066 ...

  5. C# - 常用接口

    常用接口 用于比较接口 IComparable<T> 接口内部定义了用于比较两个对象大小的CompareTo(T t)方法,>参数时返回1,=参数时返回0,<参数时返回-1.集 ...

  6. rest_framework框架的认识

    它是基于Django的,帮助我们快速开发符合RESTful规范的接口框架. 一  路由 可以通过路由as_view()传参 根据请求方式的不同执行对应不同的方法 在routers模块下 封装了很多关于 ...

  7. vcenter新建虚拟机centos7作为虚拟机模板

    网卡选项 适配器类型算则E1000 Remote console选项 电源选项 加密 打开电源,连接iso安装系统 按一下tab键,修改网卡为eth0 点击Tab,打开kernel启动选项后,增加ne ...

  8. 仿stl+函数模板

    #include<iostream> using namespace std; template<class T> void output(T begin, T end) { ...

  9. 【原创】大叔经验分享（43）logstash设置jdbc_default_timezone后报错

    logstash6.6.0-6.6.2版本使用jdbc input plugin时如果设置了jdbc_default_timezone,会报错: { 2012 rufus-scheduler inte ...

  10. Fiddler 抓包设置

    手机抓包设置 一:配置Fiddler参数 打开Fiddler菜单项Tools->TelerikFiddler Options->HTTPS, 勾选CaptureHTTPS CONNECTs ...