el-table设置列属性fixed导致滚动条无法拖动-骨灰级
一、前言说明
网上一搜索,千篇一律的设置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导致滚动条无法拖动-骨灰级的更多相关文章
- 关于bootstrap table 固定列宽
首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height= ...
- table设置表格有滚动条
table 设置表格有滚动条. 少说多做,代码中有注释: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...
- Delphi dbf文件如何定位记录(即设置Table的RecNum属性来移动到该记录号)
Delphi的table的RecNum属性,可以用来定位记录,如:self.Table1.RecNum:=23;即可以让数据库记录移动到23号记录上,但这种作用仅限于Paradox数据库,而不是dBA ...
- table固定列的宽度,超出部分用…代替(针对普通table和antd)
一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- 伪Textatea的构建(div+table),以及相应的滚动条问题与safari上的优化
在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个textarea,并将它的disabled="disabled",并设置相应的scroll属性,就可以构建 ...
- mysql数据类型和列属性
列属性: 定义一个字段时对该字段设置的额外的信息或约束 1. 关联操作:reference 2. 字段默认值:default value 3. 主索引和唯一索引:primary key 和uni ...
- DataPackage-数据库、表的区域设置和系统不一致导致处理失败
问题描述: 最近学习Datapackage,创建完之后,部署处理但总是提示某某字段的区域设置和目标字段的区域设置不一致,具体如图: 测试发现其它的数据库表又没有这类 ...
- EDM排版table设置padding在ie7下bug
今天搞EDM发现一个在ie7下很扯淡的bug,由于以前没遇到过,所以花了点时间来解决下. IE7下bug重现: <table cellpadding="0" cellspac ...
- 使用IDENTITY列属性和Sequence对象
使用IDENTITY列属性 1. 建立表 Sales.MyOrders USE TSQL2012; IF OBJECT_ID(N'Sales.MyOrders', N'U') IS NOT NULL ...
随机推荐
- 海康摄像SDK开发笔记(一):海康威视网络摄像头SDK介绍与模块功能
前言 视频监控.人脸识别等应用中经常使用到摄像头,当前占据主流视频监控摄像头就是海康和大华两家,都可通过自家的sdk或者是onvif方式使用和控制摄像头. 本文章讲解海康的sdk方式. 海康 ...
- linux服务器界面初始--day01
linux服务器界面初始 ip add show 查看服务器网卡信息还可以使用ifconfig 局域网ip: 192.168.1.0 10.0.0.0 172.16.1.0 如果网卡没有启用,我们需要 ...
- 【LeetCode排序专题01】由旋转数组的最小数字引出的关于排序算法的讨论(冒泡排序、二分查找+暴力法)
旋转数组的最小数字 剑指 Offer 11. 旋转数组的最小数字 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 给你一个可能存在 重复 元素值的数组 numbers ,它原来是一 ...
- 4-request对象
前端提交数据 必备知识点 前端form表单中action属性,不写默认是当前路由地址 前端form表单中的method属性,不写默认是GET请求 前端页面 templates\register.htm ...
- 【Azure 应用服务】使用Python Azure SDK 来获取 App Service的访问限制信息(Access Restrictions)
问题描述 为Azure App Service添加访问限制,需要Python Azure SDK来实现的示例代码. 问题解答 查阅Azure App Service的官方资料,使用Python SDK ...
- 【Azure 事件中心】Flink消费Event Hub中事件, 使用Azure默认示例代码,始终获取新产生的事件,如何消费旧事件呢?
问题描述 根据Azure Event Hub示例文档,[将 Apache Flink 与适用于 Apache Kafka 的 Azure 事件中心配合使用],配置好 consumer.config 文 ...
- 如何扩展Spark Catalyst,抓取spark sql 语句,通过listenerBus发送sql event以及编写自定义的Spark SQL引擎
1.Spark Catalyst扩展点 Spark catalyst的扩展点在SPARK-18127中被引入,Spark用户可以在SQL处理的各个阶段扩展自定义实现,非常强大高效,是SparkSQL的 ...
- 排查 dotNET Core 程序内存暴涨的问题
0. 问题 新版本上线之后,发现内存猛涨,入站流量猛增,不清楚具体原因,部分接口提示 OOM 异常,随后 Pod 直接崩溃无限重启. 1. 准备 Pod 已经接入了 NewRelic 和 Graylo ...
- git 常见命令和资源
git练习 常用git清单 强制切换分支所指位置 git branch -f main c3强制分支main指向c3 git branch -f main HEAD~3强制分支main指向head的父 ...
- XAF Blazor ListView 布局样式
前言 XAFBlazor虽然可以适应PC端及移动端,但从它的界面可以看出,它明显是移动优先的(Mobile First).这样的界面在PC端有时会感觉不是很方便(特别对于数据密集的系统来说),即将发布 ...