重生之我在公司写elementPlus vue3的合并列以及多级表头单行展示

先看效果图

这个分为两个部分

1、合并表头
2、合并列

合并表头

这个实际真正的结构试这样的

通过文档中 header-cell-style对表头的样式进行动态更改 在第二行的时候 通过设置display：none
下面是代码部分

const headerStyle = ({ row, column, rowIndex, columnIndex }) => {
	console.log(row, column, rowIndex, columnIndex)
	// rowIndex  行索引   0代表表头第一行
	// columnIndex 列索引  0表示第一个单元格
	if (rowIndex === 1 && columnIndex === 1) {//第二行表头隐藏
		return { display: 'none' }
	}
	if (rowIndex === 1 && columnIndex === 0) {//第二行表头隐藏
		return { display: 'none' }
	}
	return { textAlign: 'center' }
}

合并列

合并列的数据结构是根据，后端返回的array数据里面children来确认 模块和功能的对应

export const result = [
  {
    id: 15316592974789,
    moduleCode: "Project",
    moduleName: "项目基本信息",
    children: [
      {
        id: 15316613093189,
        moduleCode: "Basic",
        moduleName: "基本息",
      },
      {
        id: 15316620138053,
        pId: 15316592974789,
        moduleCode: "ParticipatingUnits",
        moduleName: "参建单位",
      },
      {
        id: 15316627228613,
        pId: 15316592974789,
        moduleCode: "ProjectOverall",
        moduleName: "项目总体情况",
      },
    ],
  },
  {
    id: 15316635645509,
    pId: null,
    moduleCode: "ContractManagement",
    moduleName: "合同管理",
    moduleDescribe: null,
    children: [
      {
        id: 15316651016261,
        pId: 15316635645509,
        moduleCode: "ReceiptRecords",
        moduleName: "到账记录",
      },
      {
        id: 15316655921221,
        pId: 15316635645509,
        moduleCode: "ContractSummary",
        moduleName: "合同全要素汇总表",
      },
    ],
  },
  {
    id: 15318845346117,
    pId: null,
    moduleCode: "PersonnelManagement",
    moduleName: "人员管理",
    moduleDescribe: null,
    children: [
      {
        id: 15318855047493,
        pId: 15318845346117,
        moduleCode: "AccountingProjectPersonnel",
        moduleName: "项目人数核算表",
      },
    ],
  },
];

首先转换一下数据结构 让数据平铺
注意： 这个span关键字动态合并是通过这个span 并且只用在第一条数据后面添加span 后面的需要设置为0

const changeTableData = (params)  => {
	let array = params;
	let data = [];
	for (let index = 0; index < array.length; index++) {
		const element = array[index];
		const childrenArr = element.children;
		for (let i = 0; i < childrenArr.length; i++) {
			const childrenElement = childrenArr[i];
			const span = i == 0 ? childrenArr.length : 0
			data.push(
				mergeObj(
					{
						span: span,
						module: element.moduleName,
					},
					childrenElement
				)
			);
		}
	}
	console.error(data);
	return data
}
function mergeObj(target = {}, sources = {}) {
  let obj = target;
  if (typeof target != "object" || typeof sources != "object") {
    return sources; // 如果其中一个不是对象 就返回sources
  }
  for (let key in sources) {
    // 如果target也存在 那就再次合并
    if (target.hasOwnProperty(key)) {
      obj[key] = mergeObj(target[key], sources[key]);
    } else {
      // 不存在就直接添加
      obj[key] = sources[key];
    }
  }

  return obj;
}

合并后的数据结构是这样子的

下面通过 el-table的 :span-method 进行列的动态合并

const objectSpanMethod = ({ row, column, rowIndex, columnIndex, }) => {
	if (columnIndex === 0) {
		if (row.span === 0) {
			return {
				rowspan: row.span,
				colspan: 0,
			}
		} else {
			return {
				rowspan: row.span,
				colspan: 1,
			}
		}
	}
}

完事 ~
_{今天代码就到此为止吧} 明天依然要光芒万丈嗷~~~