el-table合并表头handerMethod

项目中使用element的table表格，总是需要一些自定义的要求，虽然element已经提供了很多方法，但是如何使用还是需要自己探索

先上效果截图

这里主要使用到:header-cell-style="handerMethod"和:span-method="spanMethod"用来合并行和列

主要代码包括:

//隐藏表头

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

if (row[0].level == 1) {

//这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效

row[0].colSpan = 0

row[1].colSpan = 2

if (columnIndex === 0) {

return { display: 'none' }

}

}

},

//合并列

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

if (columnIndex === 0) {

if (column.property === 'name') {

if (rowIndex !== 0) {

return { display: 'none' }

} else {

return { rowspan: 5, colspan: 1 }

}

} else {

return { rowspan: 1, colspan: 1 }

}

}

这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效 我也是试了很多次才得出这个结论

合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时，让第二列占据两个单元格的宽度来实现合并效果

提供el-table完整代码

:data="tableData"

style="width: 100%"

:header-cell-style="handerMethod"

:span-method="spanMethod"

height="900"

border

row-class-name="riskList-row"

cell-class-name="riskList-cell"

header-row-class-name="riskList-headerRow"

header-cell-class-name="riskList-headerCell"

>

prop="name"

label="风险等级"

width="100"

:resizable="false"

>

prop="level"

label="风险等级"

width="400"

:resizable="false"

>

文章来源：el-table合并表头handerMethod