标签：src 绿色 div 值类型 multiple class methods 表格 strip
使用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‘ }
然后表格的展示效果变成如下：
表格的行高修改成功
标签：src 绿色 div 值类型 multiple class methods 表格 strip
原文地址：https://www.cnblogs.com/MrZhaoyx/p/11910772.html
