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 固定表头的更多相关文章

  1. HTML table固定表头

    最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...

  2. Table 固定表头的几种方法

    <style type="text/css"> /*所有内容都在这个DIV内*/ div.all { border: 3px solid #FF00FF; width: ...

  3. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

  4. element table固定表头,表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  5. table 固定表头

    1 .table { border-collapse: collapse; } .table th { display: table-cell; } .fixedThead {//thead disp ...

  6. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  7. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  8. css实现“固定表头带滚动条”的table

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. html Table实现表头固定

    最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...

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

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

随机推荐

  1. [LeetCode] 902. Numbers At Most N Given Digit Set 最大为 N 的数字组合

    We have a sorted set of digits D, a non-empty subset of {'1','2','3','4','5','6','7','8','9'}.  (Not ...

  2. Python遥感数据主成分分析

    原文:http://www.cnblogs.com/leonwen/p/5158947.html 该算法由MatLab移植而来(具体参见上一篇博文).但是最终输出结果却和MatLab不一致,经排查发现 ...

  3. cloudstack4.11 centos7 安装文档

    centos 7.x  cloudstack 4.11 提示:生产环境 建议用ceph 块存储为主存储, 这里测试使用的是nfs主存储     组件 172.16.19.116  cloudstack ...

  4. SpringBoot第十篇:thymeleaf详解

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10931435.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   Sprin ...

  5. Salesforce学习之路(二)Profile

    如上篇文章所述,针对User来讲,最重要的概念便是Profile和Role,因为Profile于Security息息相关,这是一个合格的产品中十分重要的一环. 何为Profile? 前文所讲--就是一 ...

  6. 如何在 ubuntu 下使用 Windows 里面的字体

    01. 02. 03. 04. 谢谢浏览!

  7. 只安装自己需要的 Office 2016 组件的方法

    以往Office的安装包都采用的是MSI安装器,允许用户在安装时选择安装的组件,但是微软发布的Office 2016安装包只提供了C2R(ClickToRun)方式,因此默认情况下用户无法选择安装组件 ...

  8. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 下)

    大家好,在上一篇系列文章里,我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容. Navigation 如果要改变当前路径,我们可 ...

  9. 2019-11-29-win10-UWP-Controls-by-function

    原文:2019-11-29-win10-UWP-Controls-by-function title author date CreateTime categories win10 UWP Contr ...

  10. Python - 基础语法 - 第一天

    编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 标识符 第一个字符必须是字母表中字母或下划线 _ . 标识符的其他的部分由字母.数字和下划线 ...