一、前言说明

网上一搜索,千篇一律的设置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导致滚动条无法拖动-骨灰级的更多相关文章

  1. 关于bootstrap table 固定列宽

    首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height= ...

  2. table设置表格有滚动条

    table 设置表格有滚动条. 少说多做,代码中有注释: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...

  3. Delphi dbf文件如何定位记录(即设置Table的RecNum属性来移动到该记录号)

    Delphi的table的RecNum属性,可以用来定位记录,如:self.Table1.RecNum:=23;即可以让数据库记录移动到23号记录上,但这种作用仅限于Paradox数据库,而不是dBA ...

  4. table固定列的宽度,超出部分用…代替(针对普通table和antd)

    一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...

  5. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  6. 伪Textatea的构建(div+table),以及相应的滚动条问题与safari上的优化

    在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个textarea,并将它的disabled="disabled",并设置相应的scroll属性,就可以构建 ...

  7. mysql数据类型和列属性

    列属性: 定义一个字段时对该字段设置的额外的信息或约束 1.  关联操作:reference 2.  字段默认值:default value 3.  主索引和唯一索引:primary key 和uni ...

  8. DataPackage-数据库、表的区域设置和系统不一致导致处理失败

    问题描述:       最近学习Datapackage,创建完之后,部署处理但总是提示某某字段的区域设置和目标字段的区域设置不一致,具体如图:             测试发现其它的数据库表又没有这类 ...

  9. EDM排版table设置padding在ie7下bug

    今天搞EDM发现一个在ie7下很扯淡的bug,由于以前没遇到过,所以花了点时间来解决下. IE7下bug重现: <table cellpadding="0" cellspac ...

  10. 使用IDENTITY列属性和Sequence对象

    使用IDENTITY列属性 1. 建立表 Sales.MyOrders USE TSQL2012; IF OBJECT_ID(N'Sales.MyOrders', N'U') IS NOT NULL ...

随机推荐

  1. day01---操作系统安装环境准备

    虚拟机安装操作系统步骤 1.新建虚拟主机 2.选择自定义 3.稍后安装操作系统 4.操作系统选择linux 5.选择存放位置 6.cpu和核数选择,默认即可 7.内存分配 8.网络选择 9.控制器类型 ...

  2. Android内存优化—内存优化总结

    内存优化总结 内存问题 内存抖动:导致GC导致卡顿 内存泄漏:导致频繁GC,可用内存减少 内存溢出:导致OOM 工具排查 AS中的Profiler查看内存情况,是否锯齿状,是否持续上升 MAT排查 L ...

  3. 一文详解云上自动化部署集群管理工具 Nebula Operator

    本文首发于 Nebula Graph 公众号:Nebula Operator 开源啦!一文详解这个云上自动化部署集群管理工具 在介绍 Nebula Operator 之前,让我们先来了解下什么是 Op ...

  4. 链接服务器导致SQL Server停止响应

    概要 如果多个实例中同时存在数据源为对方实例的链接服务器,并且开启了"分发服务器"的属性,您可能会遇到这种情况. 1 现象 14:31时,在SSMS中检查HIS实例是否有复制订阅时 ...

  5. SQL之 逻辑库,数据表

    SQL语言三大类 创建逻辑库 创建数据表 例子 数据表其他操作 ps:desc仅仅查看表的结构,不能查看内容 添加字段 ps: 修改字段类型和约束 修改字段名称 删除字段

  6. 我的闲鱼Python爬虫接单总结和经验,最高600元一单

    最近,我在闲鱼上利用 Python 爬虫技术接了一些任务,想必你一定好奇,通过这样的方式,到底能不能挣钱,能挣多少钱?今天我就来分享一下我的经验和总结. 一.接单经历 之前 Vue 的作者尤大在微博上 ...

  7. vue3自定义Hooks

    比较简单的小demo,直接上代码吧 ts使用defineComponent,setup()里面使用 Composition API 写法,逻辑块清晰,不用前后文查找,拒绝 spaghetti code ...

  8. RIPEMD算法:多功能哈希算法的瑰宝

    一.RIPEMD算法的起源与历程 RIPEMD(RACE Integrity Primitives Evaluation Message Digest)算法是由欧洲研究项目RACE发起,由Hans D ...

  9. 2FA双因素认证 - TOTP详解

    主页 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 引言 在2FA双因素认证中,TOTP可谓是标准化程度最高的技术方案.它 ...

  10. 线上RocktMQ重复投递半事务消息故障排查

    1. 故障现象 2020-11-18 10:40开始,业务线反馈线上收到大量的重复MQ半事务消息,导致容器资源消耗急剧攀升,经查看MQ日志,发现broker-b的Master服务,报出大量半事务消息回 ...