【Vue】【ElementUI】关于el-table的自适应行高设定

这篇具有很好参考价值的文章主要介绍了【Vue】【ElementUI】关于el-table的自适应行高设定。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

网上好多设置el-table高度和行高的方法,主要是用elementui文档里这几个参数:
element table设置行高,vue.js,elementui,javascript
element table设置行高,vue.js,elementui,javascript

我直接用css设置了el-table的高度,主要是为了自适应,百分比根本不管用,所以用vh单位:

.el-table {
  display: block;
  height: 68vh;
  overflow-y: auto;
}

行高之前用了cell-style,有一个问题是它只能用px单位,设置了之后改分辨率或者换浏览器大小就不一致了,还很丑。
所以还是直接用css改,在控制台找一下
element table设置行高,vue.js,elementui,javascript
先试了一下el-tabe__body,设置了一个60vh,满信息可以,但如果一页只有两三条,为了撑开,每行就会变成这样
element table设置行高,vue.js,elementui,javascript

所以直接设置el-table__row

.el-table /deep/ .el-table__row{
  height:6vh !important;
}

变正常了,还可以自适应:
element table设置行高,vue.js,elementui,javascript文章来源地址https://www.toymoban.com/news/detail-610703.html

到了这里,关于【Vue】【ElementUI】关于el-table的自适应行高设定的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue2+ElementUI的el-table实现新增数据行与删除的功能

    TableIndex.vue 如下 新增 按钮添加数据行 删除 按钮提示是否继续删除

    2024年04月23日
    浏览(40)
  • vue 获取elementUI中的el-table里每一行的index并传到方法中

    通过在el-table组件上绑定@row-click事件,获取所点击的行的index: 请注意,在处理handleRowClick方法时,我们需要计算出所点击的行在el-table数据数组中的位置,这里使用了event.target.parentNode.rowIndex-1来获取其索引值。 使用element-ui中的slot-scope属性,将每一行的索引传递给自定义列

    2024年02月10日
    浏览(45)
  • vue2+elementui的el-table固定列会遮住横向滚动条以及错位

    我是最右侧固定列,所以下面的class名称是 .el-table__fixed-right , 如果有左侧固定请自行替换为 el-table__fixed 防止固定列表格高度错位 如果还没有解决错位, 请看你的 el-table__body-wrapper 是不是自己写了 max-height 的样式属性, 这会影响固定列定位的 解决固定列错位后, 接下来就是

    2024年02月02日
    浏览(46)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(62)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(54)
  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(61)
  • 【el-table的表格宽度自适应】

    el-tale组件在表头中只提供了一个width属性来控制表格的宽度,如果将其写死,则会针对过长的内容可能会有溢出换行、针对过短的内容可能会出现占位过多,所以就写了一个js文件来根据字符的长短来返回相应的宽度。 代码如下(示例):

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

    mainHeightMixins.js @/lib/tools 系统页面引用

    2024年02月16日
    浏览(36)
  • el-table自适应列宽实现

    动态计算 效果图:

    2024年02月10日
    浏览(35)
  • 修改(elementui)el-table底层背景色

    先给table添加类名(如class=\\\"styleTable\\\") 在style上面添加scoped 写法:类名 ::v-deep .el-table类名{} 注意:给styleTable也设置背景色为透明才生效。 如下图所示👇 单独创建一个css文件,给el-table th,el-table_cell等你要修改的类名添加背景色为透明;在每个vue页面都引用此文件即可生效。

    2024年02月10日
    浏览(61)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包