工作中经常会遇到需要将表格合并的需求,elementUI官方文档也有对应的方法,但是不够详细,发个贴记录一下学习之路
通过给
table
传入
span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行
row
、当前列
column
、当前行号
rowIndex
、当前列号
columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表
rowspan
,第二个元素代表
colspan
。 也可以返回一个键名为
rowspan
和
colspan
的对象。
html部分没有什么写的 照着文档搬就行了
<el-table
class="table"
:data="data"
border
style="width: 100%"
size="mini"
:header-cell-style="headerStyle"
:cell-style="cellStyle"
height="37rem"
:span-method="objectSpanMethod"
>
<el-table-column label="本周签到表(06.27-07.01)" align="center">
<el-table-column
:prop="key.value"
:label="key.label"
v-for="(key, index1) in tableheader"
:key="index1"
align="center"
:width="index1 == 0 ? 120 : ''"
:formatter="index1 == 3 ? valformat : format"
>
</el-table-column>
</el-table-column>
</el-table>
首先需要在data里面声明两个变量用来保存合并的数据
data(){
return{
span:[],
index:null
}
}
然后就是写一个方法 遍历数据,得到需要合并的行数据,
// 获取需要合并的数据
getSpanArr(data) {
// data就是我们从后台拿到的数据
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.span.push(1);
this.index= 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].date === data[i - 1].date) {
this.span[this.index] += 1;
this.span.push(0);
} else {
this.span.push(1);
this.index= i;
}
}
}
},
// 表格合并行方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.span[rowIndex];
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: 1
};
}
},
最后是效果图
我只提供了方法,具体使用看个人需求 稍加改造即可