el-table合并表头handerMethod_el-table表头合并-CSDN博客
Element表格之表头合并、行合并和列合并_element表格表头合并-CSDN博客
一、合并表头
话不多说，先看效果图：
表格结构如上，其中:header-cell-style对表头做了一些处理。
headFirst({row, colunm, rowIndex, columnIndex}) {
if (rowIndex === 1) {
//这里为了是将第二列的表头隐藏，就形成了合并表头的效果
return {display: 'none'}
}
return "background:#f5f7fa"
}
二、合并表格行
效果图如
要进行表格合并，关键在于你要对数据渲染的前进行判断处理，在这里，首先要在table中写入:span-method=‘objectSpanMethod’,然后在js部分写上方法。
这里我以第一列为例：
// 领域合并
, courseinit() {
// 首先初始化
var _this = this;
this.courseArr = []
this.coursePos = 0
for (var i = 0; i < _this.tableData2.length; i++) {
//判断是否是第一行
if (i === 0) {
//导入第一行数据
_this.courseArr.push(1)
_this.coursePos = 0
} else {
//不是第一行时，就根据标识去存储，course为我第一行的prop属性的值
if (_this.tableData2[i].course === _this.tableData2[i - 1].course) {
// 查找到下一行的数据等于上一行的数据时每次要把之前存储的数据+1
_this.courseArr[_this.coursePos] += 1
_this.courseArr.push(0)
} else {
// 没有相同的数据时候，要记住当前的index
_this.courseArr.push(1)
_this.coursePos = i
}
}
}
}
//然后开始写组件自带的方法，
, objectSpanMethod({rowIndex, columnIndex}) {
//判断第一列的数据，上下行有没有相同的数据，有则合并，无则保留
if (columnIndex === 0) {
//courseArr数组是上面输出来的，用来合并表格前做的数据判断
const row1 = this.courseArr[rowIndex]
const col1 = row1 > 0 ? 1 : 0
return {
rowspan: row1,
colspan: col1
}
} else if (columnIndex === 1) {
//这里是判断第二列的数据，nameArr和领域合并时候的处理一样，以此类推
const row1 = this.nameArr[rowIndex]
const col1 = row1 > 0 ? 1 : 0
return {
rowspan: row1,
colspan: col1
}
}
}
用这种方式合并的数据，最好是一条数据渲染一行，才好进行判断上下行的数据要不要进行合并。
三、合并表格列
效果图为：
同样的你只要使用 :span-method="objectSpanMethod2"方法就好了。这里判断的方式就有些不同了。
objectSpanMethod2({row, column, rowIndex, columnIndex}) {
// 判断所有数据是否有child属性、且有长度、且其parent_id == 1的数据单元格进行合并
if (!(row.child && row.child.length || row.parent_id != '0')) {
if (columnIndex === 0) {
// 将第一列向右合并一格
return [1, 2];
} else if (columnIndex === 1) {
// 删除第二列
return [0, 0];
}
} else if (columnIndex === 0) {
// 对第一列的数据进行行合并
const row1 = this.titleArr[rowIndex]
const col1 = row1 > 0 ? 1 : 0
return {
rowspan: row1,
colspan: col1
}
}
}
列合并相对于行合并要简单，但是要确定好你要合并哪一行，如果表格是固定的，就轻松多了，只要给对应的那几行进行合并即可。
最后总结一下。
首先你要用rowIndex, columnIndex找到要合并的开始单元格，然后接下来的原理是：
returm {rowspan: 1,colspan: 1}表示表格不变
return (rowspan: 2,colspan: 1}表示表格向下合并一个单元格
return {rowspan: 1,colspan: 2}表示表格向右合并一个单元格
returm (rowspan: 0,colspan: 0}表示删除此单元格
项目中使用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>
