element中遇到的表格问题总结

1、列表表头的颜色自定义

<el-table :data="pageData" style="width: 100%;" height="500" border tooltip-effect="dark" :header-cell-style="getRowClass"
:row-style="tableRowStyle">

//设置第一行背景色

getRowClass({ row, column, rowIndex, columnIndex }) {

        if (rowIndex == 0) {

return 'background:#f5f7fa'

        }else{

return ''

} },

tableRowStyle({ row, rowIndex }){

    return 'background-color: #F7F6Fd'

}

2、表头中文字居中

header-align="center"

<el-table-column prop="partName" label="部件名称" header-align="center" fixed>

3、表头中文字断行

<el-table-column prop="Length" :render-header="renderHeader" header-align="center" label="规格（长/深）*宽*（高/厚）" width="190px">

renderHeader (h) {

return [h('p', {}, ['规格']),h('p', {}, ['（长/深）*宽*（高/厚）'])]

},、

4、table表格高度自适应

<el-table :data="pageData" style="width: 100%" :height="tableHeight">

data() {

return {

tableHeight:window.innerHeight-x}

}

其中x不加px