el-table 行の高さを変更する

el-table は、行の高さ、行スタイル行のスタイルを変更するためのコールバック メソッドです
。固定オブジェクトを使用して、すべての行に同じスタイルを設定することもできます。
cell-style セルのスタイルのコールバック メソッド。固定オブジェクトを使用して、すべてのセルに同じスタイルを設定することもできます。
header-row-style ヘッダー行のスタイルのコールバック メソッド。固定オブジェクトを使用して、すべてのヘッダー行に同じスタイルを設定することもできます。
header-cell-style ヘッダー セルのスタイルのコールバック メソッド。固定オブジェクトを使用して、すべてのヘッダー セルに同じスタイルを設定することもできます。

これら 4 つの属性は、主にテーブルの行とテーブル ヘッダーの行の高さに関連しています。行
関連属性の高さを 0 に設定し、
セル関連属性のパディングを 0 に設定し、デフォルトのパディング (td のパディングの 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;
	      }
   	 }
  }

おすすめ

転載: blog.csdn.net/weixin_66029924/article/details/127417392