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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步