element UI 调整表格行高

Posted 2020-11-22 mrzhaoyx

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

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

查看官网的文档，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‘
}

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

表格的行高修改成功