0


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 去掉
然后利用深度作用选择器 选中行标签 设置自己想要的高度

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;
          }
        }
  }
标签: vue.js 前端 elementui

本文转载自: https://blog.csdn.net/weixin_66029924/article/details/127417392
版权归原作者 dictionarce 所有, 如有侵权,请联系我们删除。

“el-table 改变行高”的评论:

还没有评论