element ui el-table表格纵向横向滚动条去除并隐藏空白占位列

这篇具有很好参考价值的文章主要介绍了element ui el-table表格纵向横向滚动条去除并隐藏空白占位列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动
el-table横向滚动条,ui,elementui,el-table

现在需求是右侧滚动条不好看,需要去除滚动条并隐藏滚动条所占列的位置

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar { // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滚动条轨道
    border: none;
  }
}

// --------------------隐藏table gutter列和内容区右侧的空白
.el-table th.gutter{
  display: none;
  width:0
}
.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}

.el-table__body{
  width: 100% !important;
}

效果

el-table横向滚动条,ui,elementui,el-table文章来源地址https://www.toymoban.com/news/detail-757923.html

到了这里,关于element ui el-table表格纵向横向滚动条去除并隐藏空白占位列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui的table实现滚动加载,涵el-table组件封装一份

    重点就是 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e n e r 函数,想快点弄上去看效果的直接弄这个函数吧 如果不在mounted中则一定要this.$nextTick(() = this.addRollListener()) 示例代码 如果你把上面的看过了;只需要在 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e

    2023年04月08日
    浏览(62)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(55)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(50)
  • element-ui表格高度自适应(el-table 自适应高度)

    想让element-ui的表格 el-table 出现滚动条的时候,如果不做处理就只能是 height=“XXXpx”,给它一个固定的高度,我们的页面正常情况下,是不允许出现页面级滚动条的,也是不美观的,想让table自适应高度并且有滚动条,而且不会出现页面级滚动条,可以这么实现,下面是我写

    2024年01月17日
    浏览(55)
  • Element-UI el-table高度不固定,自适应高度显示滚动条

    表格内容过多时显示滚动条:可通过 max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动

    2024年02月11日
    浏览(59)
  • vue element-ui表格(el-table)数据导出execl文件

    功能实现:element UI 的el-table数据导出为execl文件 使用到插件:xlsx、file-saver exportExecl.js 代码如下: 页面代码如下:

    2024年02月14日
    浏览(57)
  • element ui el-table sorttable实现表格拖拽排序(vuedraggable)

    如果已经安装了 vuedraggable ,则可以不用安装 sortablejs

    2024年02月11日
    浏览(44)
  • [element-ui] el-table表格合并 span-method

    element 中表格合并 span-method 函数详解

    2024年02月13日
    浏览(57)
  • Element-ui中表格el-table图片预览效果实现(非常实用)

    🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅  文末获取源码联系 🏆先展示效果:   🏆使用的是下面这个插

    2024年02月11日
    浏览(61)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包