专栏首页前端之攻略Element table设置固定列,没有滚动条时底部会显示一条线的解决方法

Element table设置固定列,没有滚动条时底部会显示一条线的解决方法

固定列需要在el-table-column 上设置fixed属性,它接受Boolean值或者left  right,表示左边固定还是右边固定

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
   <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

在小屏幕上含有滚动条,显示是正常的,但是如果是大屏幕没有滚动条就在底部约17像素的地方有一条线,非常不美观,

通过审查元素发现,如果是左侧固定,不管有没有滚动条.el-table-fixed 这个元素 样式都是距离底部17px,

固定右边的列类似,只是样式没有直接写bottom:17px

如何解决呢?

思路:页面解析完成后,如果内容的宽度小于或者等于容器的宽度 就把bottom设置为1px

完整的代码

  mounted() {
    //修改固定列有和没有滚动条的样式
    var wrapWidth = document.querySelector(".el-table__header-wrapper").offsetWidth;
    var tableWidth;
    setTimeout(() => {
      tableWidth = document.querySelector(".el-table__header").offsetWidth - 17;
      console.log(wrapWidth, tableWidth);
      document.querySelector(".el-table__fixed-right").style.height = "auto";
      document.querySelector(".el-table__fixed-right").style.bottom = "17px";
      if (tableWidth <= wrapWidth) {
        document.querySelector(".el-table__fixed").style.bottom = "1px";
        document.querySelector(".el-table__fixed-right").style.bottom = "1px";
      }
    }, 500);
   },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element 表格导出为Excel表格

    在页面点击导出按钮时可以正常导出,但是如果左边有固定的列,相同的数据会导出2遍,可以做如下修改:

    tianyawhl
  • Element Table 增加搜索功能

    但是如果有多个table都要搜索,最好使用方法,因为可以传参数(tableData 表格数据;searchContent:输入框内容)

    tianyawhl
  • element 嵌套数据合并单元格两种处理方法

    通过table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面是{row, column, rowIndex, columnInde...

    tianyawhl
  • 大数据-Hive修改表

    cwl_java
  • Vue项目中使用Mockjs造假数据

    (目录结构不强求,主要还是看你项目的划分。也可以单独出一个request文件,放axios.js、mock.js、和专门整理接口用的url.js)

    xing.org1^
  • 从面试官甄别项目经验的角度,说说如何在简历中写项目经验(java后端方向)

    在大多的JD(职位介绍)里,会写明该职位需要xx时间的相关经验,换句话说就是需要在简历中看到一定年限的相关商业项目经验,否则估计连面试的机会都没。

    用户1153489
  • 亚马逊人脸识别系统再“犯错”,国内“学友八杀”后又有“神探” 立功了

    人脸识别技术在国内的布局可以说是畅行无阻,当然这里的人民已经习惯于公权力的监控,李彦宏也说了,“中国人对隐私没有那么敏感”。

    AI科技大本营
  • 学霸双胞胎开源斯坦福CS 221人工智能备忘录,图文并茂看懂反射、状态、变量、逻辑

    这份备忘录解释了课程中的许多名词、公式和原理,动图、文字、表格并茂,作者之一还是官方助教,堪称CS 221最佳学习笔记。

    磐创AI
  • Java 绘图

    用户2965768
  • 诡异的else

    计算机程序由两部分组成,数据和语句。每一类数据有一个对应的数据类型,不同编程语言有不同的分类方法,但是不管怎么说,任何语言都有整数、小数、字符串。但是程序都是需...

    不可言诉的深渊

扫码关注云+社区

领取腾讯云代金券