使用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' }
然后表格的展示效果变成如下:
表格的行高修改成功