ホームページ  >  記事  >  ウェブフロントエンド  >  Vueでテーブルの行の高さを変更する方法

Vueでテーブルの行の高さを変更する方法

藏色散人
藏色散人オリジナル
2023-01-31 16:11:434352ブラウズ

テーブルの行の高さを変更する Vue メソッド: 1. 対応する vue ファイルを開きます; 2. テーブル スタイル コードを表示します; 3. ":row-style="{height:'20px'}" :cell を変更します-style="{padding:'0px'}"" 属性値はテーブルの行の高さを変更できます。

Vueでテーブルの行の高さを変更する方法

このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、DELL G3 コンピューター

テーブルの変更方法Vueの行の高さは?

vue 要素 UI el-table テーブルは、セル内の行の高さとフォント サイズを調整します

説明:

縮小: 行の高さが一定に達すると、ズームアウトすることはできません。最小は35pxのようです。あなたはそれを試すことができます。

Raise: 実際の開発では最大値を試していませんが、行の高さは自分に合った高さに調整できます。

 <el-table
    :row-style="{height:&#39;20px&#39;}"
    :cell-style="{padding:&#39;0px&#39;}"
    style="font-size: 10px">
 </el-table>

cell-style="padding:0" この列は追加する必要はありません。これは、高さを下げたときに最小の高さに達し、それ以上下げることができなくなったときに追加したものです。

主に次の 2 行のコードです

:row-style="{height:&#39;20px&#39;}"
:cell-style="{padding:&#39;0px&#39;}"

推奨される学習: 「vue.js ビデオ チュートリアル

以上がVueでテーブルの行の高さを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。