一、前言说明

网上一搜索,千篇一律的设置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. __set_name__魔法方法

    介绍 __set_name__ 方法是 Python 3.6 中引入的一种特殊方法,它可以在类属性被赋值时自动调用.这个方法可以用来处理类属性的名称绑定问题,例如将类属性与其所在的类进行绑定. 具体来 ...

  2. 「实操」适配 NebulaGraph 新版本与压测实践

    本文来自邦盛科技-知识图谱团队-繁凡,本文以 NebulaGraph v3.1.0 为例. 前言 NebulaGraph v3.1 版本已经发布有一段时间了,但是我们的项目之前是基于 v2.6.1 版 ...

  3. 二十一: Mysql 锁机制

    Mysql 锁机制 事务的 隔离性 由这章讲述的 锁 来实现. 1. 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制.在程序开发中会存在多线程同步的问题,当多个线程并发访问某个数据的时候,尤 ...

  4. centos python3虚拟环境

    为什么需要虚拟环境? 在使用 Python 语言时,通过 pip(pip3)来安装第三方包,但是由于 pip 的特性,系统中只能安装每个包的一个版本.但是在实际项目开发中,不同项目可能需要第三方包的不 ...

  5. MinGW编译Python至pyd踩坑整理

    不需要安装VS工具,pyd使用说明. 用scoop自动安装配置MinGw 需要魔法,用包管理scoop安装不需要手动配置.这一步可以自行下载mingw64然后手动配置. scoop install m ...

  6. .NET数据库ORM框架SqlSugar使用笔记

    官方介绍 以下介绍来自SqlSugar官网: 高性能 ,不夸张的说,去掉Sql在数据库执行的时间,SqlSugar是EF数倍性能,另外在批量操作和一对多查询上也有不错的SQL优化 高扩展性 ,支持自定 ...

  7. nginx 重写(rewrite) 重定向(return error_page) 详解

    使用 rewrite 指令用于重写URL Nginx的rewrite指令用于重写URL,它有几个参数,这些参数定义了如何匹配和重写请求的URL.以下是rewrite指令的常见参数及其说明: Regex ...

  8. 基于2.4G私有协议的无线取餐系统设及实现

    前记  最近在使用TLSR8355做几个小产品.正好赶上有客户需要一个无线取餐系统解决方案.笔者分析了一下需求.该芯片有充足的按键,LED灯,GPIO接口等.做这一款产品是顺道的事情. 需求梳理  功 ...

  9. day14--Java常用类之字符串相关类02

    Java常用类 2.字符串相关类 String.StringBuilder.StringBuffer类是三个字符串相关类. String类代表不可变字符序列,StringBuilder类和String ...

  10. windows下删除文件时提示“操作无法完成 因为文件已在。。。”解决方案

    解决方案:利用"资源监视器",如上图: 具体步骤: win+r,输入perfmon打开资源监视器 或者 右键--Windows 7任务栏--启动任务管理器--性能--资源监视器-- ...