el-table合并单元格

el-table合并单元格

合并效果

http://yangyushu.gitee.io/demo-element-table-cell-merge/

demo地址

https://gitee.com/yangyushu/demo-element-table-cell-merge

代码片段

methods: {
		/**
		 * 封装--合并单元格--合并列
		 * 本方法参数参照
		 * https://element.eleme.cn/#/zh-CN/component/table
		 */
		verticalMerger({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			if (row[column.property]) { // 空值不合并
				if (columnIndex > 0) { // 不合并第一列
					return this.whetherVertical(column.property, row[column.property], rowIndex)
				}
			}
		},
		/**
		 * 调用--获取合并列个数
		 * @param {String} key 当前单元格key
		 * @param {String} value 当前单元格value
		 * @param {Number} site 当前单元格下标
		 */
		whetherVertical(key, value, site) {
			const list = this.tableData // 获取当前页所有数据
			// 如果该数据下标不为0并且与上一格相同，该单元格被合并
			if (site > 0 && list[site - 1][key] === value) {
				return [0, 0]
			}
			// 获取当前单元格合并个数，如果下一格不同，则返回1
			const num = this.getVerticalSum(key, value, list, site, 1)
			return [num, 1]
		},
		/**
		 * 递归--查询合并列数量
		 * @param {String} key 当前参数key
		 * @param {String} value 当前参数value
		 * @param {Array} list 当前查询集合
		 * @param {Number} site 当前所在下标
		 * @param {Number} sum 合并个数（递归增加）
		 */
		getVerticalSum(key, value, list, site, sum) {
			// 是否下一项存在
			if (list[site + 1]) {
				// 判断下一项是否符合条件
				if (list[site + 1][key] === value) {
					return this.getVerticalSum(key, value, list, site + 1, sum + 1)
				} else {
					return sum
				}
			} else {
				return sum
			}
		},
		/**
		 * 封装--合并单元格--合并行
		 */
		horizontalMerger({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			if (row[column.property]) { // 空值不参与合并
				const sub = this.horiKeys.findIndex(item => item === column.property)
				// 判断当前单元格是否在合并keys中
				if (sub !== -1) {
					return this.whetherHorizontal(row[column.property], sub, this.horiKeys, rowIndex)
				}
			}
		},
		/**
		 * 调用--获取合并行个数
		 * @param {String} value 单元格value
		 * @param {Number} sub 单元格key所在keys集合的下标
		 * @param {Array} keys 参与合并的keys集合
		 * @param {Number} rowIndex 当前数据所在行数（下标）
		 */
		whetherHorizontal(value, sub, keys, rowIndex) {
			const list = this.tableData // 获取当前页所有数据
			// 如果上一项存在并和该项相同，则该单元格被合并
			if (sub > 0 && list[rowIndex[keys[sub - 1]]] === value) {
				return [0, 0]
			}
			const num = this.getHorizontalSum(value, list[rowIndex], keys, sub, 1)
			return [1, num]
		},
		/**
		 * 递归--查询合并数量
		 * @param {String} value 单元格value
		 * @param {list} data 当前行数据
		 * @param {String} keys 需要合并key集合
		 * @param {Number} sub 单元格key在key集合中的下标
		 * @param {Number} sum 合并个数（递归增加）
		 */
		getHorizontalSum(value, data, keys, sub, sum) {
			if (keys[sub + 1]) {
				if (data[keys[sub + 1]] === value) {
					return this.getHorizontalSum(value, data, keys, sub + 1, sum + 1)
				} else {
					return sum
				}
			} else {
				return sum
			}
		}
	}