一、前言说明

网上一搜索,千篇一律的设置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. OpenCV开发笔记(七十五):相机标定矫正中使用remap重映射进行畸变矫正

    前言   相机标定,重映射可以进行插值映射从而矫正图像,这是一种方法,也有矩阵映射方法,本篇使用重映射方式解说畸变矫正的计算原理.   Demo   横向纵向区域固定拉伸:     横向纵向拉伸:   ...

  2. 看看这份2023年MySQL终级面试题,提升你的内力,给你面试助力

    1.MySQL 中有哪几种锁? (1)表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最 高,并发度最低. (2)行级锁:开销大,加锁慢:会出现死锁:锁定粒度最小,发生锁冲突的概率最 ...

  3. 第141篇:微信小程序wx.request接口报错(errno: 600001, errMsg: "request:fail -2:net::ERR_FAILED")

    好家伙,   来看看报错 报错如下:   请求发送部分,代码如下: uni.request({ url: self.serverUrl + "/getRealName", meth ...

  4. fatal: bad object refs/remotes/origin/xxx

    解决方案: 1.项目的.git文件内的目录.git/logs/refs/remotes/origin/,删除该错误的本地远程分支: 2.执行git pull --rebase即可 类似错误信息例子: ...

  5. Lua学习笔记3

    Lua学习笔记3 IO读写 Lua中读写使用自带的I/O库处理文件. 分为简单模式和完全模式. 简单模式(simple model)拥有一个当前输入文件和一个当前输出文件,并且提供针对这些文件相关的操 ...

  6. Linux_Centos_yum报错总结

    ​ 此篇适用于yum报错[尝试其他镜像]并且[curl 外网]不通的情况,此时一般考虑是网络的问题 一,出现的报错信息: 此时测试curl / ping www.baidu.com会发现无法连通 二, ...

  7. Windows配置R语言、RStudio开发环境

      本文介绍R语言及其集成开发环境RStudio的下载.安装方法.   R语言是一个属于GNU操作系统的开源软件,在数据统计与分析.可视化等方面具有优秀的表现:而RStudio则是R语言的集成开发环境 ...

  8. CefSharp 开发触屏终端遇到的问题记录

    一.背景 最开始准备使用的 Chromely 做一个终端机项目,本来以为挺顺利的一个事情折腾了两天半.由于无法直接控制窗体的属性,最后还是切换到 .NET Framework 4.8 + CefSha ...

  9. C#版开源免费的Bouncy Castle密码库

    前言 今天大姚给大家分享一款C#版开源.免费的Bouncy Castle密码库:BouncyCastle. 项目介绍 BouncyCastle是一款C#版开源.免费的Bouncy Castle密码库, ...

  10. form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好

    form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好 代码 <Upload :action="action" :max-size="ma ...