<el-table :data="tableData1" fit size="mini" ref="tableList" :header-cell-
style="cells" border :height="tableHeight" style="width: 100%;" >
<el-table-column prop="categoryName" label="" fixed align="left" width="30" show-
overflow-tooltip> </el-table-column>
<el-table-column prop="categoryId" label="" fixed align="left" width="30" show-overflow-
tooltip> </el-table-column>
<el-table-column prop="subCategoryName" label="" fixed align="left" width="35" show-overflow-tooltip> </el-table-column>
<el-table-column prop="subCategoryId" label="类别" fixed align="left" width="30" show-
overflow-tooltip> </el-table-column>
<el-table-column prop="name" label="名称" fixed align="center" width="180" > </el-
table-column>
<el-table-column prop="unit" label="单位" fixed align="center" width="80"></el-table-
column>
如图 把前四列都合并成一个单元格,只显示类别,那么用到 :header-cell-style 这个属性,它里面有四个参数,分别对应行、列,行索引、列索引、所以直接在cells方法里写就行:
// 头部样式 前四列合并
cells({row, column, rowIndex, columnIndex}) {
console.log(row,column,rowIndex,columnIndex)
if (row[0].level==1) {
row[0].colSpan = 0;
row[1].colSpan = 0;
row[2].colSpan = 0;
row[3].colSpan = 4;
if (columnIndex === 0 ||columnIndex===1 ||columnIndex===2 ) {
return { display: "none" };
}
}
//改变当前行样式
return "font-size:14px;color:#fff;background:#4F81BD;";
},
这样前四列就合并成一个单元格了。