一、前言说明

网上一搜索,千篇一律的设置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. 内存管理机制 & 垃圾回收机制

    内存管理机制 python是由c开发出来的. 看源码分析,下载python安装包tar包 解压后主要看Include和Objects这两个文件夹 # 分析 在创建对象时,如 v = 0.3 源码内部: ...

  2. 用NavigationManager实现订单的列表和新增页面之间的导航

    1.在订单列表页面放置"新增"按钮 2.注入NavigationManager,按钮被点击后导航到新增订单的路径 3.测试一下,能工作了. 4.订单新增后,返回订单列表页面 5.测 ...

  3. canal实现mysql跨机房备份

    背景介绍 跨机房数据库数据备份 数据库增量异构系统分发(cache,mq等) 数据内容聚合分析组件 摘录作者的描述 原理图 canal 模拟 MySQL slave 的交互协议,伪装自己为 MySQL ...

  4. Nebula Graph 源码解读系列 | Vol.03 Planner 的实现

    上篇我们讲到 Validator 会将由 Parser 生成的抽象语法树(AST)转化为执行计划,这次,我们来讲下执行计划是如何生成的. 概述 Planner 是执行计划(Execution Plan ...

  5. C++ STL 容器 forward_list类型

    C++ STL 容器 forward_list类型 介绍 std::forward_list 是 C++ 标准模板库 (STL) 中的一个单向链表容器.与 std::list 不同,std::forw ...

  6. Java 多线程------解决 实现Runnabel接口方式线程的线程安全问题 方式二:同步方法 +总结

    方式二:同步方法* 如果操作共享数据的代码完整的声明在一个方法中,我们不妨将此方法声明同步的 1 package bytezero.threadsynchronization; 2 3 4 5 /** ...

  7. Openssl命令详解 - 证书篇

    生成自签证书 # 设置CA证书subject CA_SUBJ="/C=CN/ST=ShanDong/L=JiNan/O=sec/OU=sec/CN=www.hxy.com/emailAddr ...

  8. Zabbix“专家坐诊”第181期问答汇总

    问题一 Q:大佬们,有没有基础的 监控模板 触发器分享下? A:你可以试一下乐维免费版(https://forum.lwops.cn/download ),里面基本的模板全齐. 问题二 Q :orab ...

  9. 摆脱鼠标系列 - vscode vim - 自动切换到英文 - im-select

    为什么 摆脱鼠标系列 - vscode vim - 自动切换到英文 - im-select 省得每次都得按 shfit 下载软件 https://gitee.com/pengchenggang/im- ...

  10. vuecli-vite-vue3-init 项目架子 快速开发 webpack打包

    要vite的开发的快速 和 webpack打包 开发的时候 用vite,可以打包一个本地可以直接双击,不用起服务的代码 这个架子的缺点就是 vite和vuecli 两套双配置 正式公司项目 还是vue ...