el-table中合并垂直方向的单元格
- 一、合并垂直方向单元格,有相同字段的合并一起
一、合并垂直方向单元格,有相同字段的合并一起
合并一起的都有相同的字段mergeType
javascript"> <el-tableclass="merge-table":data="tableData"v-loading="isLoading":span-method="spanMethod"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"size="mini"empty-text="暂无数据":stripe="true"borderstyle="width: 100%"></el-table>spanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 ||columnIndex === 1 ||columnIndex === 2 ||columnIndex === 3 ||columnIndex === 4 ||columnIndex === 5 ||columnIndex === 6 ||columnIndex === 7) {// 缓存通过筛选条件得到的数组,避免重复计算const tempArr = this.tableData.filter(b => b.mergeType === row.mergeType);const isFirstRow =rowIndex === this.tableData.findIndex(item => item.mergeType === row.mergeType);if (isFirstRow) {return {rowspan: tempArr.length,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}} else {return {rowspan: 1,colspan: 1,};}},