el-table 改变行高

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

el-table改变行高
row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。
cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

主要这4个属性 关系到表格行和表格头的行高
将row相关属性 中的height设置为0
将cell相关属性 中padding设置为0 将td中的padding默认padding:8px 0 去掉
然后利用深度作用选择器 选中行标签 设置自己想要的高度文章来源地址https://www.toymoban.com/news/detail-515626.html

table上设置
		:row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        :header-row-style="{height: '0'}"
        :header-cell-style="{padding: '0'}"cript

css
		::v-deep(.el-table__header) { //表头行高
		    tr {
		      height: 40px;  //设置高度 主要是这个
		    }
		    .cell {
		      display: inline-flex;
		      align-items: center;
		      justify-content: center;
		      height: 23px;
		      width: 100%;
    }

	 ::v-deep(.el-table__body) {
    	tr { 或这儿设试下
	      .cell {
	        width: 100%;
	        height: 30px;   //设置高度 主要是这个
	        line-height: 30px;
	        flex-wrap: nowrap;
	        overflow: hidden;
	        text-overflow: ellipsis;
	        white-space: nowrap;
	        justify-content: center;
	        align-items: center;
	      }
   	 }
  }

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

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

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

相关文章

  • el-table实现纯前端导出(适用于el-table任意表格)

    2023.9.1今天我学习了如何使用el-table实现前端的导出功能,该方法的好处有无论你的el-table长什么样子,导出之后就是什么样子。 1.安装三个插件 npm install file-save npm install xlsx npm install xlsx-style 2.创建Export2Excel.js 3.按需引入 4.vue.config.js引入 效果: 扩展: 当我们会出现这样的表

    2024年02月10日
    浏览(40)
  • el-table 多选框改成单选框(el-table单选功能)

    今天,写项目时,有一个table作为筛选的载体,需要选中table里面的一条数据,我想了一下,用table里面的selection功能,实现单选功能。

    2024年02月16日
    浏览(35)
  • 【详解|彻底搞懂el-table和列表过滤】vue列表过滤和el-table的实现

    vue列表过滤 el-table的理解 先来看一段代码: chatGPT 的理解真的很6: 这段代码使用了 Element UI 的组件,创建了一个表格列组件 el-table-column,并为它设置了一些属性和插槽。 各种属性: 名称 作用 prop 指定了该列绑定的数据对象的属性名为 warehouseName label 指定了该列的列名为 “

    2024年02月11日
    浏览(33)
  • el-table默认选中

    最近开发,记录下el-table组件默认选中数据的方式,后台返回的数据不尽相同,代码里面有注释,可以自己根据不同的值换成自己需要的对应的key 场景1:根据用户选择的不同的id去请求渲染的数据,在渲染出来的数据里面进行数据的默认勾选 场景2:每次渲染的表格不同,所以

    2024年02月11日
    浏览(33)
  • el-table那些事

    用于记录工作和日常学习遇到的坑,需求。 vue3+element-plus+ts 1、获取el-table所有勾选的行数据 1、需要先声明一个ref变量,并赋值给el-table 2、通过el-table提供的getSelectionRows()函数获取选中的\\\"行对象\\\"数据集 2、el-table自定义列标题 3、el-table列可编辑,加入el-input等 4、el-table勾选只

    2024年02月14日
    浏览(30)
  • el-table 列分页

    2024年02月05日
    浏览(38)
  • el-table实现懒加载(el-table-infinite-scroll)

    2023.8.15今天我学习了用el-table对大量的数据进行懒加载。 效果如下:   1.首先安装:   2.全局引入: 3.页面使用: 如果大家有不懂的地方可以参考: 1.vue—在el-table上实现懒加载效果_列表懒加载插件_迷路小灰灰的博客-CSDN博客 2.el-table-infinite-scroll - npm (npmjs.com) 

    2024年02月12日
    浏览(37)
  • el-table合并单元格

    el-tabel数据结构 此处为this.rolePermitItemList 合并后的样式: el-table-column 需要添加property字段,属性值同props,用来判断需要合并的字段

    2024年02月14日
    浏览(32)
  • elemeentui el-table封装

    elemeentui el-table封装 

    2024年01月19日
    浏览(35)
  • el-table自定义展开行

    根据element ui官方文档说明,展开行需要用到两个属性:row-key 和 expand-row-keys,还有expand-change事件    在el-table中:  注意:row-key是数据的唯一标识。 template中完整代码如下: 解决展开行第一次展开数据不显示问题:在获取数据的时候往数据中追加一个expandRow字段(字段名可

    2024年02月13日
    浏览(10)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包