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] 29. Divide Two Integers 两数相除

    Given two integers dividend and divisor, divide two integers without using multiplication, division ...

  2. TypeWriting

    头文件getputch.h /* * getputch.c */ /* 用于getch/putch的通用头文件"getputch.h" */ #ifndef __GETPUTCH ...

  3. 逗号表达式(c)

    #include <stdio.h> #include <stdlib.h> int main(void) { ; ; printf(" %d\n ", a ...

  4. 2019.11.12&13题解

    写在前面: 虽然拿到了rk1,但是T3被卡常TLE90分,(考后再交就A了!?),lemon80,又丢失了一次良好的AK机会, 掐头去尾距离联赛仅剩2天,最近中午一直睡不好,可能是有些紧张, 希望自己 ...

  5. java web开发入门五(ssh整合)基于intellig idea

    SSH整合 1.引入jar包 Struts 核心jar Hibernate 核心jar Spring Core  核心功能 Web  对web模块支持 Aop   aop支持 Orm   对hiber ...

  6. Navicat的安装和pymysql模块的使用

    内容回顾 select distinct 字段1,字段2,... from 表名 where 分组之前的过滤条件 group by 分组条件 having 分组之后过滤条件 order by 排序字段 ...

  7. LInux 学习笔记系列

    1.Linux 就该这么学的笔记系列

  8. C#快速入门指南

    C# C#集成开发环境结构结构体枚举接口派生类全析 集成开发环境 Visual Studio 结构 using System; 包含 System 命名空间 class hello{ /*注释*/ s ...

  9. 【前端知识体系-CSS相关】CSS布局知识强化

    1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { ma ...

  10. crushmap磁盘智能分组

    目录 简介 配置crush class 1. 创建ssd class 2. 创建基于ssd的class rule 3. 创建基于ssd_rule规则的存储池 4. 测试基于ssd的池 简介 ceph从 ...