项目中使用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完整代码
<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"
>
<el-table-column
prop="name"
label="风险等级"
width="100"
:resizable="false"
>
</el-table-column>
<el-table-column
prop="level"
label="风险等级"
width="400"
:resizable="false"
>
</el-table-column>
<el-table-column label="后果" :resizable="false">
<el-table-column label="影响特别重大" width="320" :resizable="false">
<template slot-scope="scope">
<div class="table_item" :style="customState(scope.row.level_1)">
{{ scope.row.level_1 }}
</div>
</template>
</el-table-column>
<el-table-column label="影响重大" width="320" :resizable="false">
<template slot-scope="scope">
<div class="table_item" :style="customState(scope.row.level_2)">
{{ scope.row.level_2 }}
</div>
</template>
</el-table-column>
<el-table-column label="影响较大" width="320" :resizable="false">
<template slot-scope="scope">
<div class="table_item" :style="customState(scope.row.level_3)">
{{ scope.row.level_3 }}
</div>
</template>
</el-table-column>
<el-table-column label="影响一般" width="320" :resizable="false">
<template slot-scope="scope">
<div class="table_item" :style="customState(scope.row.level_4)">
{{ scope.row.level_4 }}
</div>
</template>
</el-table-column>
<el-table-column label="影响很小" width="320" :resizable="false">
<template slot-scope="scope">
<div class="table_item" :style="customState(scope.row.level_5)">
{{ scope.row.level_5 }}
</div>
</template>
</el-table-column>
</el-table-column>
</el-table>