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查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
随机推荐
- vue图片放大、缩小、旋转等
用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 效果: 安装 使用npm命令安装 npm install v-viewer 使用 引入v-viewer及必需的css样式 ...
- ASP.NET MVC 下使用支付宝支付接口 以及 ASP.NET Core 下相关改造支付
通过nuget首先引用AopSdk.dll 包 下面写的是 Asp.Net MVC 下相关的支付接口 APP支付 配置客户端相关的参数,配置成自己的代码就可以了 private string APPI ...
- C++语言编程规范
前言 这里参考了<高质量C++C 编程指南 林锐>.<google C++编程指南>以及<华为C++语言编程规范>编写了这份C++语言编程规范文档,以合理使用 C+ ...
- RGB灯
robotbit扩展板4个rgb灯,r-红,g-绿,b-蓝,值为0~255,可模拟出256*256*256种颜色. from microbit import * import neopixel r = ...
- centos7.x下环境搭建(五)—nginx搭建https服务
https证书获取 十大免费SSL证书 https://blog.csdn.net/ithomer/article/details/78075006 如果我们用的是阿里云或腾讯云,他们都提供了免费版的 ...
- Go语言-1-标识符与变量
目录 1. Go标识符 1.1 Go关键字 1.2 常量标识符(4个) 1.3 空白标识符(1个) 1.4 内置数据类型标识符 1.5 内置函数(15个) 2. Go语言操作符 3. Go语言变量 3 ...
- 【linux】CentOS 查看系统时间,修改时区
===============CentOS 7.6================ 1.查看系统时间 date 查看当前系统时间以及时区结果是: Mon Jul 8 09:23:31 UTC 2019 ...
- WPF 精修篇 属性动画
原文:WPF 精修篇 属性动画 属性动画 是通过 Storyboard 来改变属性值 <Rectangle x:Name="rect" Width="200&quo ...
- mssql 根据执行计划细节做优化操作
示例: 1.如果select * 通常情况下聚集索引会比非聚集索引更优. 2.如果出现Nested Loops,需要查下是否需要聚集索引,非聚集索引是否可以包含所有需要的列. 3.Hash Match ...
- VUE创建播发器组件并调用
欢迎来到我的友链小屋 首先用vue-cli创建前端项目 参考:https://www.cnblogs.com/ouyangkai/p/11549290.html 新建play.vue文件 编写pl ...