el-table改变行高
row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。
cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。文章来源:https://www.toymoban.com/news/detail-515626.html
主要这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模板网!