el-table设置列属性fixed导致滚动条无法拖动-骨灰级
一、前言说明
网上一搜索,千篇一律的设置el-table__fixed,如:
.el-table__fixed { // 左固定列
height: auto !important;
bottom: 18px;
}
.el-table__fixed-right { // 右固定列
height: auto !important;
bottom: 18px;
}
此方法存在较多问题:
1.导致表格错位,还要去调整错位问题,也会导致更多浏览器兼容错位问题
2.bottom的固定高度只能满足单一浏览器分辨率,不同电脑不同浏览器,分辨率不同,会出现多一些少一些等情况。
二、有效方案
通过首次进入,加载数据完成后重新渲染一次表格即可解决问题,以下是解决方案的相关代码
<!-- 1.表格上增加ref属性 -->
<el-table ref="tableRef" ……>
……
</el-table> <script>
export default {
data() {
return {
// 2. 定义变量,是否需要表格重新渲染
needDoLayout: true,
}
}
created() {
this.queryData();
},
methods: {
queryData() {
// 查询数据代码 省略
// 3.第一次查询数据时,将表格重新渲染即可
if(this.needDoLayout){
this.$nextTick(() => {
this.$refs['tableRef'].doLayout();
});
this.needDoLayout = false;
}
}
}
</script>
el-table设置列属性fixed导致滚动条无法拖动-骨灰级的更多相关文章
- 关于bootstrap table 固定列宽
首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height= ...
- table设置表格有滚动条
table 设置表格有滚动条. 少说多做,代码中有注释: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...
- Delphi dbf文件如何定位记录(即设置Table的RecNum属性来移动到该记录号)
Delphi的table的RecNum属性,可以用来定位记录,如:self.Table1.RecNum:=23;即可以让数据库记录移动到23号记录上,但这种作用仅限于Paradox数据库,而不是dBA ...
- table固定列的宽度,超出部分用…代替(针对普通table和antd)
一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- 伪Textatea的构建(div+table),以及相应的滚动条问题与safari上的优化
在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个textarea,并将它的disabled="disabled",并设置相应的scroll属性,就可以构建 ...
- mysql数据类型和列属性
列属性: 定义一个字段时对该字段设置的额外的信息或约束 1. 关联操作:reference 2. 字段默认值:default value 3. 主索引和唯一索引:primary key 和uni ...
- DataPackage-数据库、表的区域设置和系统不一致导致处理失败
问题描述: 最近学习Datapackage,创建完之后,部署处理但总是提示某某字段的区域设置和目标字段的区域设置不一致,具体如图: 测试发现其它的数据库表又没有这类 ...
- EDM排版table设置padding在ie7下bug
今天搞EDM发现一个在ie7下很扯淡的bug,由于以前没遇到过,所以花了点时间来解决下. IE7下bug重现: <table cellpadding="0" cellspac ...
- 使用IDENTITY列属性和Sequence对象
使用IDENTITY列属性 1. 建立表 Sales.MyOrders USE TSQL2012; IF OBJECT_ID(N'Sales.MyOrders', N'U') IS NOT NULL ...
随机推荐
- defaultdict高级用法
说明 defaultdict数据结构允许调用者提供一个函数,用来在键名缺失的情况下,创建与这个 键对应的值.只要字典发现调用者想要访问的键不存在,就会触发这个函数,以返回应该 与键相关联的默认值 下面 ...
- channel管道
channel 如果说goroutine是并发体的话,那么channels则是他们之间的通信机制.一个channel是一个通信机制,它可以让一个goroutine通过它给另一个goroutine发生值 ...
- Go语言实现记账本
使用面向过程思想实现 package main import ( "fmt" ) func main(){ key := "" //设置初始金额 sum := ...
- vue 项目npm run dev(启动)时报错The service was stopped
vue项目yarn upgrade后vite build报错,如何项目也运行不起来了. 报错截图: 解决办法: 删除node_modules文件夹,然后执行yarn install重新生成心的node ...
- Oracle设置日志参数-ALTER DATABASE ADD SUPPLEMENTAL LOG DATA;
要实现两个数据库之间的实时同步,需要给Oracle设置参数 ALTER DATABASE ADD SUPPLEMENTAL LOG DATA; -- 执行了12小时,等待数据库中的其它事务都提交以后才 ...
- 【Azure 应用服务】登录App Service 高级工具 Kudu站点的 Basic Auth 方式
问题描述 从Azure App Service的页面中,直接跳转到高级管理工具Kudu站点(https://<your app service name>.scm.chinacloudsi ...
- 面试官:说说SSO单点登录的实现原理?
单点登录(Single Sign-On, SSO)是一种让用户在多个应用系统之间只需登录一次就可以访问所有授权系统的机制.单点登录主要目的是为了提高用户体验并简化安全管理. 举个例子,您在一个大型企业 ...
- 从0开始搭建开发环境 -实现servlet原生开发
开发环境: JDK1.8 + Servlet + Mysql 搭建项目 项目搭建参考博客 https://www.cnblogs.com/oyww-2027/p/15347137.html File ...
- 一个简单的spdlog使用示例
目录 引用源码 封装Log头文件 使用方法 spdlog是一个开源.跨平台.无依赖.只有头文件的C++11日志库,网上介绍的文章有很多这里就不过多的介绍了,GitHub链接:https://githu ...
- mac Error: EACCES: permission denied, mkdir
原因还是权限问题 就是说 npm 出于安全考虑不支持以 root 用户运行,即使你用 root 用户身份运行了,npm 会自动转成一个叫 nobody 的用户来运行,而这个用户几乎没有任何权限.这样的 ...