el-table 固定表头
fixedTableHeaderMixin.js:
/*
使用此mixin:
第一:需要在页面的el-table配置属性:ref="table" 和 :height="tableHeight"。
举例:
<el-table ref="table" :height="tableHeight" v-loading="tableLoading" element-loading-text="拼命加载中" :data="tableData">
第二:需要添加样式(偶发:有表格没有出现y轴滚动条的情况)
.el-table__body-wrapper {
overflow-y: scroll !important;
}
*/
export default {
data () {
return {
tableHeight: 250
}
},
mounted () {
this.$nextTick(() => {
this.setTableHeight()
// 监听窗口大小变化
window.onresize = () => {
this.setTableHeight()
}
})
},
beforeDestroy () {
// 由于window.onresize是全局事件,在其他页面改变界面时也会执行,这样可能会出现问题,需要在离开这个界面时注销window.onresize事件
window.onresize = null
},
methods: {
setTableHeight () {
this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 115
console.log('this.tableHeight')
console.log(this.tableHeight)
}
}
}
参考:https://www.cnblogs.com/muou2125/p/9952491.html
https://www.cnblogs.com/aidixie/p/10754683.html
el-table 固定表头的更多相关文章
- HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...
- Table 固定表头的几种方法
<style type="text/css"> /*所有内容都在这个DIV内*/ div.all { border: 3px solid #FF00FF; width: ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- table 固定表头
1 .table { border-collapse: collapse; } .table th { display: table-cell; } .fixedThead {//thead disp ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
- (转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
- css实现“固定表头带滚动条”的table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- html Table实现表头固定
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
- Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
随机推荐
- python总结十
1.代码int('20',8)的返回结果是:16 2.日志的统计和记录对于程序开发来说非常重要,python提供了非常好用的日志模块logging 3.元祖修改 4.python内置映射类型称为字典 ...
- Leetcode 第135场周赛解题报告
这周比赛的题目很有特点.几道题都需要找到一定的技巧才能巧妙解决,和以往靠数据结构的题目不太一样. 就是如果懂原理,代码会很简单,如果暴力做,也能做出来,但是十分容易出错. 第四题还挺难想的,想了好久才 ...
- Tomcat启用HTTPS协议配置过程
Article1较为简洁,Article2较为详细,测试可行. Article1 概念简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问 ...
- 手撕代码:统计1到n二进制数中1出现的总次数
题目描述: 互娱手撕代码题. 统计从1到n这n个数的二进制表示中1出现的次数. 思路分析: 思路一:直接的做法是从1遍历到n,对于每个数和1做与操作,之后,对于这个数不断做右移操作,不断和1做与操作, ...
- 【ztree】回显选中节点
// treeId是元素id,array是数据数组 var ztree = $.fn.zTree.init($("#treeId"), setting, array); // 获取 ...
- mysql操作(精简版)
一.数据库操作(建库.删库) 1.查看数据库:show databases; 2.创建数据库:DROP DATABASE 数据库名; 3.删除数据库:CREATE DATABASE 数据库名; 4.使 ...
- 新安装NODEJS之后配置
1配置阿里镜像服务器 npm config set registry https://registry.npm.taobao.org --global npm config set disturl h ...
- 027 奥展项目涉及的javascipt知识点笔记
1.获取指定div标签内的所有input标签 let inputs = document.getElementById("inspect-part1").getElementsBy ...
- nginx 的一些优化(突破十万并发)
一般来说 nginx 配置文件中对优化比较有作用的为以下几项: worker_processes 8; nginx 进程数,建议按照 cpu 数目来指定,一般为它的倍数. worker_cpu_aff ...
- eclipse使用maven,启动工程tomcat报错:java.lang.ClassNotFoundException: org.springframework.web.context.Contex
maven是个不错的管理jar包工具,但是我们在eclipse使用maven时,总是遇上这样那样的问题,比如今天,我编译工程,启动过后,tomcat报错:java.lang.ClassNotFound ...