当前位置: 首页 > 工具软件 > Object-table > 使用案例 >

el-table 改变行高

江坚成
2023-12-01

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

 类似资料: