element-table合并单元格

最新推荐文章于 2025-07-14 16:50:17 发布

原创最新推荐文章于 2025-07-14 16:50:17 发布 · 567 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文详细介绍了如何在ElementUI的table组件中，使用未封装和封装的方式合并单元格，针对相同数据进行上下合并，并展示了相应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：element-table合并单元格，相同的数据上下合并

一、使用未封装的element-table

1、合并的公共方法commonService.js

export default {
/**
   * 合并表格数据
   * tableData：表示表格数据
   * data： 要合并的列
   * obj: { row, column, rowIndex, columnIndex }
   * @param
   * @returns
   */
  objectTableSpanMethod(tableData, data, obj) {
    for (let index = 0; index < data.length; index++) {
      if (obj.columnIndex === data[index].columnIndex) {
        const _row = this.filterData(tableData, data[index].value)[obj.rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  },
  // 根据是否有相同数据返回一个如[2,0,3,0,0]格式的数组(公共的)
  filterData(arr, value) {
    let spanOneArr = []
    let concatOne = 0
    arr.forEach((item, index) => {
      if (index === 0) {
        spanOneArr.push(1)
      } else {
        // name 修改
        if (item[value] === arr[index - 1][value]) {
          spanOneArr[concatOne] += 1
          spanOneArr.push(0)
        } else {
          spanOneArr.push(1)
          concatOne = index
        }
      }
    })
    return spanOneArr
  }
}

2、element-table的写法

:span-method=“objectspanMethod” 调用合并方法

  <el-table
      :border="true"
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      max-height="704px"
      :span-method="objectSpanMethod"
  >
   <el-table-column prop="test1" label="测试1" align="center"></el-table-column>
    <el-table-column prop="test2" label="测试2" align="center"></el-table-column>
    <el-table-column prop="test3" label="测试3" align="center"></el-table-column>
    <el-table-column prop="test4" label="测试4" align="center"></el-table-column>
  </el-table>

3、合并方法

data表示要合并的列，columnIndex表示合并的列下标，下标从0开始，value表示合并的列属性
比如要合并第二列和第四列，

objectSpanMethod(obj) {
	const data = [
		{ columnIndex: 1, value: 'test2' },
		{ columnIndex: 3, value: 'test4' }
	]
	return commonMethod.objectTableSpanMethod(
		this.tableData,
		data,
		obj
	)
}

二、使用封装的element-table

1、合并的公共方法commonService.js

比没封装的多一个callback回调， filterData方法同上，省略…

export default {
/**
   * 合并表格数据
   * tableData：表示表格数据
   * data： 要合并的列
   * obj: { row, column, rowIndex, columnIndex }
   * @param
   * @returns
   */
  objectTableSpanMethod(tableData, data, obj, callback) {
    for (let index = 0; index < data.length; index++) {
      if (obj.columnIndex === data[index].columnIndex) {
        const _row = this.filterData(tableData, data[index].value)[obj.rowIndex]
        const _col = _row > 0 ? 1 : 0
        callback({
          rowspan: _row,
          colspan: _col
        })
      }
    }
  }
}

2、封装公共的element-table的组件，详情省略

common-table的写法

  <el-table
      :border="true"
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      max-height="704px"
      :span-method="objectSpanMethod"
  >
  </el-table>

调用父组件的objectSpanMethod的合并方法

objectSpanMethod({ row,column,rowIndex,columnIndex },val){
	let obj = {
	rowspan: 1
	colspan: 1
	this.$emit('objectSpanMethod',
		{ obj: { row, column, rowIndex, columnIndex }, value: val }
		(val) => {
		obj = val
		}
	)
	return obj
}

3、使用封装的common-table的组件, 其他省略

引入common-table组件，common-table的写法

  <common-table
      @objectSpanMethod="objectSpanMethod"
      ...
  />

合并方法

data表示要合并的列，columnIndex表示下标，下标从0开始，value表示属性
比如要合并第二列和第四列，

objectSpanMethod(obj, callback) {
	const data = [
		{ columnIndex: 1, value: 'test2' },
		{ columnIndex: 3, value: 'test4' }
	]
	return commonMethod.objectTableSpanMethod(
		this.tableData,
		data,
		obj,
		callback
	)
}