How to modify table row height in vue

Vue method to modify table row height: 1. Open the corresponding vue file; 2. View the table style code; 3. Modify ":row-style="{height:'20px'}" :cell -style="{padding:'0px'}"" attribute value can modify the table row height.

The operating environment of this tutorial: Windows 10 system, Vue version 3, DELL G3 computer

How to modify the table row height in vue?

vue element UI el-table table adjusts the row height and the font size in the cell

Description:

Reduction: Once the row height reaches a certain level, it cannot be reduced Zoom out. It seems that the minimum is 35px. You can try it.

Raise: I have not tried the maximum value during actual development, but the row height can be adjusted to a height that suits you.

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

cell-style="padding:0" This column does not need to be added. This is what I added when I reduced the height and it reached the minimum height and could no longer be reduced.

Mainly these two lines of code

:row-style="{height:'20px'}"
:cell-style="{padding:'0px'}"

Recommended study: "vue.js video tutorial"

The above is the detailed content of How to modify table row height in vue. For more information, please follow other related articles on the PHP Chinese website!