首页 > 其他分享 >el-table设置列属性fixed导致滚动条无法拖动-骨灰级

el-table设置列属性fixed导致滚动条无法拖动-骨灰级

时间:2023-01-30 17:47:32浏览次数:40  
标签:__ el 表格 bottom 滚动条 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,表格,bottom,滚动条,table,fixed,骨灰级
From: https://www.cnblogs.com/Vrapile/p/17076779.html

相关文章

  • 在python代码中,写其他编程语言的hello world
    1.helloworld不论哪种编程语言,在你最开始学习时,都会给你一个在终端输出helloworld的示例print("helloworld")这已经成为一种惯例,最近在github上闲逛时,偶遇了一个特别有......
  • java hutool 导出excel 合并单元格
    packagepdf;importlombok.Data;importjava.math.BigDecimal;@DatapublicclassVerifyPlatform{ privatestaticfinallongserialVersionUID=1L; /**......
  • Hello,World!
    Hello,World!随便新建一个文件夹,存放代码新建一个Java文件文件后缀名为.javaHello.java【注意点】系统可能没有显示文件后缀名,我们需要手动打开编写代......
  • Shell变量替换
    变量替换之删除指定字符串语法作用${var#pattern}将$var的值从左侧删除与模式pattern匹配的最短字符串并返回。${var##pattern}将$var的值从左侧删除与模......
  • EchartsLabel显示的细节处理
    0.缘起照理来说,春节过后的我现在应该还在快乐地摸鱼划水,但小测试猛地发来测试文档和示例,我对了一波之后对其中有个Echarts的label显示超过20截断有了些许冷汗泠泠的感觉......
  • ORACLE BIPUBILSHER EXCEL模板相关问题
    1.BIPublisher介绍OracleBIpublisher,它的前身是oraclexmlpublisher。它是对一数据集(数据集简单说就是一张表)的展现定义多个模板。业务用户可以通过使用通用桌面工具......
  • Linux 常用替换命令三种方法(perl、shell、sed)
    举例在文件服务器上有一文件,文件名字:aaa.txt文件内容为:name=guodongsex=nanage=1001、perl:find-name'文件名'|xargsperl-pi-e's|被替换的字符串|替换后的字......
  • 如何在IntelliJ IDEA 中导入别人写好的项目
    首先要查看要导入项目的位置在哪(也就是查看文件的属性),记住文件所在的位置(可以先用手机拍下来) 然后打开IntelliJIDEA在File中找到Open双击进入之后进入OpenFileor......
  • HelloWord
    1.随便新建一个文件夹,存放代码2.新建一个java文件 1.文件的后缀名为.java 2.Hello.java 3.系统可能没有显示文件后缀名,我们需要手动打开3.编写代码publicclassHell......
  • 在selenium中如何处理多窗口?
    这个多窗口之间跳转处理,在实际selenium自动化测试经常遇到。点击一个链接,这个链接会在一个新的tab打开,然后接下来要查找元素在新tab打开的页面,需要先将driver切换至window,......