element-ui table表头合并和单元格合并

element-ui table表头合并和单元格合并

效果图(实际效果图内含隐私信息,故只展现excel表,与效果图样式一致):

代码:

v-if="isShow"

:data="tableData"

stripe

size="small"

row-key="index"

height="1000"

:header-cell-style="rowClass"

:span-method="objectSpanMethod"

style="width: 100%; margin: 20px 0px">

label="月份"

align="center"

min-width="380">

prop="category"

min-width="120">

prop="type"

min-width="260">

合并表头方法:

rowClass({ row, column, rowIndex, columnIndex }) {

if (rowIndex === 0 && columnIndex === 0) {

this.$nextTick(() => {

if (document.getElementsByClassName(column.id).length !== 0) {

document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2)

return false

}

})

}

if (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1)) {

return { display: 'none' }

}

},

单元格行合并方法:

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

if (columnIndex === 0) {

if (rowIndex === 0 || row.category !== this.tableData[rowIndex - 1].category) {

const rowCount = this.tableData.filter(i => i.category === row.category).length

return { rowspan: rowCount, colspan: 1 }

} else {

return { rowspan: 0, colspan: 0 }

}

}

return { rowspan: 1, colspan: 1 }

},

相关推荐

淘宝新号如何开店铺卖货?如何上货到店铺?吸引流量有技巧,看完这篇小白商家就能立刻上手!
vs如何编译c语言程序
365账号限制投注怎么办

vs如何编译c语言程序

📅 08-08 👀 5373
樱花怎么拍才好看?教你摄影技巧和拍摄思路,非常全面