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;
	      }
   	 }
  }

转载请说明出处内容投诉
CSS教程_站长资源网 » el-table 改变行高

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买