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

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

このチュートリアルの動作環境: 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:'20px'}"
:cell-style="{padding:'0px'}"

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

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