使用element UI的table默认属性,绘制表格如下:

element UI 调整表格行高-冯金伟博客园

该表格的行高太大了,于是想调小一些。

查看官网的文档,table有几个属性,

row-style:行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。类型:Function({row, rowIndex})/Object

cell-style:单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。类型:Function({row, column, rowIndex, columnIndex})/Object

header-row-style:表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。类型:Function({row, rowIndex})/Object

header-cell-class-name:表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。类型:Function({row, column, rowIndex, columnIndex})/Object

于是在el-table中增加四个属性(绿色字体):

<el-table
        ref="zeroTable"
        v-loading="iLoading"
        :data="iTableData"
        :row-style="iRowStyle"
        :cell-style="iCellStyle"
        :header-row-style="iHeaderRowStyle"
        :header-cell-style="iHeaderCellStyle"
        :style="iStyle"
        :stripe="iStripe"
        :border="iBorder"
        :max-height="iMaxHeight"
        :height="iMaxHeight"
        :default-sort="iDefaultSort"
        :highlight-current-row="iHighLightCurRow"
        @row-click="TableRowClickHandle"
        @row-dblclick="TableDoubleRowClickHandle"
        @selection-change="TableMultipleSelectionHandle">

因为四个属性的返回值类型是function或Object,所以我在methods中增加了四个函数:

iRowStyle:function ({row, rowIndex}) {
    return 'height:35px';
},
iHeaderRowStyle:function ({row, rowIndex}) {
    return 'height:35px';
},
iCellStyle:function ({row, column, rowIndex, columnIndex}) {
    return 'padding:0px'
},
iHeaderCellStyle:function ({row, column, rowIndex, columnIndex}) {
    return 'padding:0px'
}

然后表格的展示效果变成如下:

element UI 调整表格行高-冯金伟博客园

表格的行高修改成功