Element-UI中el-table如何合并相同单元格
作者：shaoin_2
这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
问题背景
项目需求table表格中，相同的类型合并成一个单元格展示。
问题描述
el-table并没有相关的语法直接合并，需要我们自己传入一个方法返回一个数组格式，来确定要合并行列。
解决问题
首先需要在 el-table 标签上绑定:span-method="objectSpanMethod"
<el-table :data="tableData" :span-method="objectSpanMethod" >
<el-table-column prop="projectName" label="订单类型" />
</el-table>再去methods中定义 objectSpanMethod 方法，data中定义一个rowSpanArr参数
// 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
handleTableData(tableData){
let rowSpanArr = [], position = 0;
for (let [index, item] of tableData.entries()) {
if (index == 0) {
rowSpanArr.push(1);
position = 0;
} else {
if (item.projectName == tableData[index - 1].projectName) {
rowSpanArr[position] += 1; //项目名称相同，合并到同一个数组中
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
position = index;
}
}
}
this.rowSpanArr = rowSpanArr
}
// 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
objectSpanMethod({ row, column, rowIndex, columnIndex }){
if (columnIndex === 0) {
const rowSpan = this.rowSpanArr[rowIndex];
return {
rowspan: rowSpan, //行
colspan: 1 //列
};
}
}扩展
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 判断是不是第一列，只有第一列才执行合并
if (rowIndex % 2 === 0) { // 判断能不能被2整除
return {
rowspan: 2, // 从当前单元格开始，执行合并2行
colspan: 1, // 从当前单元格开始，执行合并1列
};
} else {
return { // 第一列的其他元素不执行合并
rowspan: 0, // 为0，不执行合并
colspan: 0 // 为0，不执行合并
};
}
}
}总结
到此这篇关于Element-UI中el-table如何合并相同单元格的文章就介绍到这了,更多相关el-table合并相同单元格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！