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 ...
随机推荐
- 案例分享:某品牌音响系列协议调试工具(搜寻主机,查询通道,基本控制API,云音乐API,语言节目API等,可增删改指令)
需求 某音响品牌需要一套完整的协议调试工具,提供给研发人员,渠道商,客户,现场人员等使用: 1.使用sqlite3数据库存储协议, 2.搜寻主机,操作主机: 3.探测云端API,调试API: ...
- LibModbus库开发笔记(一):libmodbus库介绍、编译和基础工程模板
前言 本文章讲解libmodbus. libModbus介绍 libmodbus是一个免费软件库,可根据Modbus协议发送/接收数据.该库用C编写,并支持RTU(串行)和TCP(以太网) ...
- 正则函数及面向对象开发初识---day19
1.正则函数 # ### 正则函数 import re #search 通过正则匹配出第一个对象返回,通过group取出对象中的值 strvar = "1+2 3*4" obj = ...
- 【Azure Redis 缓存】Azure Redis Cluster 在增加分片数时失败分析
问题描述 Azure Redis Cluster 在增加分片数时失败,错误消息为: ResponseBody: { "error": { "details": ...
- 【Azure 应用服务】访问App Service突然出现 ERR_SSL_PROTOCOL_ERROR错误的解答
问题描述 在中国区的Azure App Service服务中,新创建的站点突然访问出现 " This site can't provide a secure connection,xxxx ...
- Codeforces Round 170 (Div. 1)A. Learning Languages并查集
如果两个人会的语言中有共同语言那么他们之间就可以交流,并且如果a和b可以交流,b和c可以交流,那么a和c也可以交流,具有传递性,就容易联想到并查集,我们将人和语言看成元素,一个人会几种语言的话,就将这 ...
- Scyther 协议形式化验证翻译 (第二章)
论文概述:$\alpha +\forall (\sum \oint_{3}^{4})$ 第二章: 操作语义 在第二章中我提出了一种新的安全协议的模型,用于定义安全协议以及协议的行为,在明确的模型中执 ...
- ants - 目前开源最优的协程池
ants - 目前开源最优的协程池 目前我们的项目重度使用 ants 协程池,在开启一个 go 的时候并不是用 go 关键字,而是用一个封装的 go 函数来开启协程.框架底层,则是使用 ants 项目 ...
- 解决 Genymotion 显示‘unable to start the virtual device’的问题
·解决方案 以管理员身份运行以下命令: bcdedit /set hypervisorlaunchtype off ,然后重启电脑,打开模拟器即可. 注意,一定是以[管理员]的身份运行的[命令提示符] ...
- mikumikudance 和 pmxEditor 都可以打开 pmx
mikumikudance 和 pmxEditor 都可以打开 pmx 模型下载 https://www.bilibili.com/blackboard/activity-5hkwDIRkBv.htm ...