问题背景
项目需求table表格中,相同的类型合并成一个单元格展示。
问题描述
el-table
并没有相关的语法直接合并,需要我们自己传入一个方法返回一个数组格式,来确定要合并行列。
解决问题
首先需要在 el-table
标签上绑定:span-method="objectSpanMethod"
文章来源:https://www.toymoban.com/news/detail-566169.html
<el-table :data="tableData" :span-method="objectSpanMethod" >
<el-table-column prop="projectName" label="订单类型" />
</el-table>
再去methods
中定义 objectSpanMethod
方法,data
中定义一个rowSpanArr
参数文章来源地址https://www.toymoban.com/news/detail-566169.html
// 获取相同名称的个数 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,不执行合并
};
}
}
}
点赞 评论 收藏 ~~ 留言讨论,如有错误,也希望大家不吝指出。 ~~ 点赞 评论 收藏
到了这里,关于el-table 怎么合并相同单元格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!