一、前言说明

网上一搜索,千篇一律的设置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. MySQL和Redis基本安装和配置

    MySQL 下载和安装 mysql官网下载:https://dev.mysql.com/downloads/mysql/ 下载后将目录下的bin路径加入到环境变量中 在安装目录下创建 my.ini 配 ...

  2. 记一次酣畅淋漓的 K8s Ingress 排错过程(302,404,503,...)

    故事开始 第 1 关:[流量重定向到 /] 第 2 关:[应用返回 302,重定向到 /,引入 503 错误] 第 3 关:[静态资源访问遇到 503 问题] 第 4 关:[静态资源访问遇到 403 ...

  3. DataGear 制作折柱图数据可视化图表

    利用 DataGear  看板的 自定义图表选项 功能,可以很方便地制作折柱图(或者折线-饼图.柱状-饼图)数据可视化图表. 假设有如下CSV数据集,包括名称和两个指标值数据: 名称, 指标0, 指标 ...

  4. 【Azure 应用服务】在安全漏洞扫描中发现有泄露服务器IIS版本的情况,如何实现屏蔽服务版本号信息呢?

    问题描述 当对Azure App Service应用进行安全扫描时,发现了HTTP/S请求的响应头中会包含服务端IIS的版本信息,这是一个低风险因素. 如: Server: Microsoft-IIS ...

  5. 【教程】navicat配合HTTP通道远程连接SQLite数据库

    前言 缘由 好奇的我想查看服务器上宝塔面板的SQLite数据库 久别一月,特来水文.起因是我看到服务器上搭建的宝塔面板,好奇其中使用的SQLite数据库,想用navicat远程连接看一下,奈何不会玩, ...

  6. 第12章_MySQL数据类型

    目录: https://www.cnblogs.com/xjwhaha/p/15844178.html 1. MySQL中的数据类型 类型 类型举例 整数类型 TINYINT.SMALLINT.MED ...

  7. select 对当前选项显示文本的获取 m.options[m.selectedIndex].text | selectz

    select 对当前选项显示文本的获取 m.options[m.selectedIndex].text | selectz <html> <head> <title> ...

  8. Nexus npm 搭建私有仓库 很好很强大 nrm electronjs

    Nexus npm 搭建私有仓库 很好很强大 https://www.jianshu.com/p/e437d8e694a0 主要想到这个包的话比较大 所以要是有个私有仓库 就方便许多 https:// ...

  9. QSAN: A Quantum-probability based Signed Attention Network for Explainable False Information Detection-CIKM20

    一.摘要 在社交媒体上的虚假信息检测具有挑战性,因为它通常需要烦冗的证据收集,但又缺乏可用的比较信息.从用户评论中挖掘出的线索作为群体智慧,可能对这项任务有相当大的好处. 然而,考虑到内容和评论的隐式 ...

  10. 基于pythondetcp多个客户端连接服务器

    壹: TCP是面向运输层的协议.使用TCP协议之前,必须先建立TCP连接,在传输完成后,必须释放已经建立的TCP连接.每条TCP连接只能有两个端,每一条TCP连接只能是点对点的.TCP提供可靠的交付的 ...