table行列合并的主要思路是设置colspan和rowspan。
el-table给了span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
效果图：
image.png
<el-table
ref="table"
class="table"
row-key="id"
:data="tableData"
:span-method="spanMethod"
highlight-current-row
stripe
border
>
。
。
。
</el-table>
在methods中定义spanMethod方法，返回rowspan和colspan的对象
spanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 2 || columnIndex === 6) {
return {
rowspan: row.rowspan,
colspan: row.colspan
};
} else if (columnIndex === 2) {
return {
rowspan: row.rowspan2,
colspan: row.colspan2
};
}
},
在methods中的获取表格数据的方法中计算rowspan和colspan。
handleSearch() {
// TODO
let params = {
bo: {
nameCn: this.searchForm.nameCn,
productId: this.searchForm.productId
},
page: this.page.currentPage,
rows: this.page.pageSize
}
this.$post(service.guohost + '/api/node/pages', params).then(res => {
this.page.total = res.rotal
let arr = res.rows || []
let newArr = []
arr.forEach(item => {
let rs = (item.nodeInputResDtos ? item.nodeInputResDtos.length : 0) +
(item.nodeOutputResDtos ? item.nodeOutputResDtos.length : 0)
let num = false
if (item.nodeInputResDtos) {
let flag = false
item.nodeInputResDtos.forEach(el => {
newArr.push({
id: item.id + '_' + el.id,
interfaceId: item.id,
interfaceUrl: item.interfaceUrl,
nodeNameCn: item.nameCn,
nodeNameEn: item.nameEn,
rowspan: num ? 0 : rs,
colspan: num ? 0 : 1,
rowspan2: flag ? 0 : item.nodeInputResDtos.length,
colspan2: flag ? 0 : 1,
type: 'input',
nodeId: el.id,
nameCn: el.nameCn,
nameEn: el.nameEn,
toFlushPath: el.toFlushPath,
name: el.name,
description: el.description
})
num = true;
flag = true;
})
}
if (item.nodeOutputResDtos) {
let flag = false
item.nodeOutputResDtos.forEach(el => {
newArr.push({
id: item.id + '_' + el.id,
interfaceId: item.id,
interfaceUrl: item.interfaceUrl,
nodeNameCn: item.nameCn,
nodeNameEn: item.nameEn,
rowspan: num ? 0 : rs,
colspan: num ? 0 : 1,
rowspan2: flag ? 0 : item.nodeOutputResDtos.length,
colspan2: flag ? 0 : 1,
type: 'output',
nodeId: el.id,
nameCn: el.nameCn,
nameEn: el.nameEn,
fromPath: el.fromPath,
name: el.name,
description: el.description
})
num = true;
flag = true;
})
}
if (!num) {
newArr.push({
id: item.id,
interfaceId: item.id,
interfaceUrl: item.interfaceUrl,
nodeNameCn: item.nameCn,
nodeNameEn: item.nameEn,
rowspan: 1,
colspan: 1
})
}
})
this.$set(this, 'tableData', newArr)
})
},
