element UI 調整表格行高

使用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'
}

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

表格的行高修改成功