element中遇到的表格问题总结
1、列表表头的颜色自定义
<el-table :data="pageData" style="width: 100%;" height="500" border tooltip-effect="dark" :header-cell-style="getRowClass"
:row-style="tableRowStyle">
: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