。

将使用到以下两项#xff0c;来完成今天demo演示#xff1a;多级表头#xff1a;数据结构比较复杂的时候#xff0c;可使用多级表头来展现数据的层次关系。

合…Element-UI组件el-table用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。

将使用到以下两项来完成今天demo演示多级表头数据结构比较复杂的时候可使用多级表头来展现数据的层次关系。

合并行或列多行或多列共用一个数据时可以合并行或列。

官方文档地址https://element.eleme.cn/#/zh-CN/component/table需要实现的表格如下图一、安装element-ui使用npm进行安装npm

element-ui

-S二、表头实现这里表头实现比较简单代码如下templatedivel-table

:span-methodreconstructionStuCell

stylewidth:

width50/el-table-columnel-table-column

propname

width80/el-table-columnel-table-column

propcourseName

width80/el-table-columnel-table-column

propdate

width80/el-table-columnel-table-column

proptimeStr

width100/el-table-column/el-table-columnel-table-column

propscore

width60/el-table-columnel-table-column

propscoreTotal

width60/el-table-columnel-table-column

proptotal

width60/el-table-columnel-table-column

proptotalAll

v-ifscope.row.totalAll{{scope.row.totalAll}}

及格率{{parseInt(scope.row.scoreTotal/scope.row.totalAll*100)}}%/span/template/el-table-column/el-table-column/el-table/div

default

合并单元格数据*/reconstructionStuCell({

row,

langscss/style此时表头效果已形成如下图三、数据渲染数据渲染这里较为复杂这里为方便大家理解进行逐步拆解叙述。

如有更好方法也欢迎大家指点。

3.1

模拟数据如上图在element-table目录中新建data.js文件用于存储模拟数据代码如下export

const

];页面中引入模拟数据并赋值给表格的变量代码如下scriptimport

studentData

合并单元格数据*/reconstructionStuCell({

row,

/script此时表格中可以正常渲染出部分数据了效果图如下3.2

数据处理如上图会发现科目和成绩相关信息未显示出来。

这里需要对数据进行处理下将所有科目信息调整到

和姓名字段为同一行数据中。

需要做以下几步将subject二级数据全部移至name同级的同一行数据中。

将name字段原数据移至subject的第一行数据中item和sub进行合并。

无subject子项数据的保持原数据输出。

在data.js中添加重构数据reconstructionStuData()函数代码如下/***

重构学生数据

{//有二级数据的进行处理if(Array.isArray(item.subject)item.subject.length0){//循环成绩item.subject.forEach((sub,

{let

{};if(j0){//子项第一行数据和姓名信息同行subData

Object.assign({

姓名字段信息第一行数据会合并到结束位置填充后也会被覆盖else{subData

Object.assign({

);});}//subject无子项数据保留当前位置输出else{tmpData.push(Object.assign({

item));}});return

}引入reconstructionStuData()函数代码如下scriptimport

studentData

reconstructionStuData(studentData);},methods:

{/***

合并单元格数据*/reconstructionStuCell({

row,

图解如上图列姓名位于列的第1位置起始从0开始所以序号为第0位置往下合并subject数组长度位置即可。

列总分位于列的第6位置往下合并subject数组长度位置即可。

列满分总分位于列的第8位置往下合并subject数组长度位置即可。

这是我们会发现methods中定义的reconstructionStuCell()函数还未使用通过给table传入span-method方法可以实现合并行或列方法的参数是一个对象里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

该函数可以返回一个包含两个元素的数组第一个元素代表rowspan第二个元素代表colspan。

也可以返回一个键名为rowspan和colspan的对象。

这里我们添加以下逻辑在每行数据中添加姓名、总分满分总分对应columnIndex1、columnIndex6、columnIndex8字段用来存储需要返回的colspan和rowspan数据代码如下reconstructionStuCell({

row,

row[columnIndex8];//判断条件满足情况下返回对应的rowspan和colspan数据if((column1Datacolumn1Data.columnIndexcolumnIndex)

//姓名组合并(column6Datacolumn6Data.columnIndexcolumnIndex)

//总分组合并column8Datacolumn8Data.columnIndexcolumnIndex

//满分总分组合并){return

end}以上代码添加后发现表格并无任何变化这是因为重构数据函数中还未添加对应的columnIndex1、columnIndex6、columnIndex8字段。

3.5

合并列

姓名首先我们来合并姓名这列数据将每行数据中添加columnIndex1子属性变量columnIndex表示合并对应的列位置。

subject有子项数据除第一行数据后面所有rowspan和colspan为0表示无需渲染该单元格第一行数据会向下合并并渲染填补空缺位置。

subject无子项数据rowspan和colspan为1保留原位置渲染。

如为0则当前单元格不被渲染表格会错乱。

代码如下export

{//有二级数据的进行处理if(Array.isArray(item.subject)item.subject.length0){//循环成绩item.subject.forEach((sub,

{let

{};if(j0){//子项第一行数据和姓名信息同行subData

Object.assign({

姓名字段信息第一行数据会合并到结束位置填充后也会被覆盖else{subData

Object.assign({

);});}//无子项数据保留当前位置输出else{tmpData.push(Object.assign({

columnIndex1:

总分和满分总分总分和满分总分合并部分和姓名列同理但多出一步则需计算出对应科目的总分

所有科目的满分总分。

增加第6列和第8列合并数据columnIndex6和columnIndex8并新增scoreTotal和totalAll分别保存总分和满分总分结果。

代码如下export

const

{//有二级数据的进行处理if(Array.isArray(item.subject)item.subject.length0){//循环成绩item.subject.forEach((sub,

{let

{};if(j0){//子项第一行数据和姓名信息同行subData

Object.assign({

姓名字段信息第一行数据会合并到结束位置填充后也会被覆盖else{subData

Object.assign({

被合并部分单元格填写为0subData[columnIndex6]

columnIndex:

);});}//无子项数据保留当前位置输出else{tmpData.push(Object.assign({

columnIndex1:

}此时咱们需要的表格就被渲染出来了如下图这里reconstructionStuData()函数处理能力还是相对不足只能处理特定的表格合并。

希望对大家有所帮助仅供大家参考