提示：公共js合并单元格
文章目录
前言
一、合并单元格
二、使用步骤
1.在公共的js中存放
2.在页面中使用
总结：
前言
当我们项目中多个页面都需要用到合并相同字段。一个页面一个页面的写太过于繁琐，所以封装了公共js：合并单元格
提示：以下是本篇文章正文内容，下面案例可供参考
一、合并单元格
elementui的官网上有span-method合并行或列的计算方法的属性。
自带四个属性值：({ row, column, rowIndex, columnIndex })，
row: 当前行，column: 当前列，rowIndex：当前行号，columnIndex ：当前列号
二、使用步骤
1.在公共的js中存放
代码如下（示例）：
<script>/*** 合并单元格* TableData:传递过来的表格数据* itemName：属性名* rowIndex：行索引值* */MergeCol: (TableData, itemName, rowIndex) => {// 合并单元格// id：属性名// rowIndex：行索引值var idName = TableData[rowIndex][itemName]; // 获取当前单元格的值if (rowIndex > 0) {// 判断是不是第一行// eslint-disable-next-line eqeqeqif (TableData[rowIndex][itemName] != TableData[rowIndex - 1][itemName]) {// 先判断当前单元格的值是不是和上一行的值相等var i = rowIndex;var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数while (i < TableData.length) {// 当索引值小于table的数组长度时，循环执行if (TableData[i][itemName] === idName) {// 判断循环的单元格的值是不是和当前行的值相等i++; // 如果相等，则索引值加1num++; // 合并的num计数加1} else {i = TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环}}return {rowspan: num, // 最终将合并的行数返回colspan: 1,};} else {return {rowspan: 0, // 如果相等，则将rowspan设置为0colspan: 1,};}} else {// 如果是第一行，则直接返回let i = rowIndex;let num = 0;while (i < TableData.length) {// 当索引值小于table的数组长度时，循环执行if (TableData[i][itemName] === idName) {i++;num++;} else {i = TableData.length;}}return {rowspan: num,colspan: 1,};}},</script>
2.在页面中使用
代码如下（示例）：
代码如下：
<script>//#region 合并单元格// 这个方法是 element-ui提供的单元格合并方法// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }// row: 当前行// column: 当前列// rowIndex：当前行号// columnIndex ：当前列号// 1代表：独占一行// 更大的自然数：代表合并了若干行// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格//tableData：表格的数据//types：判断是合并哪一列objectSpanMethod({ row, column, rowIndex, columnIndex }, tableData, types) {if (types === 1) {switch (columnIndex // 将列索引作为判断值) {// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）case 2:return PublicFunction.MergeCol(tableData, "itemDetail", rowIndex);case 1:return PublicFunction.MergeCol(tableData, "item", rowIndex);}} else {switch (columnIndex) {case 1:return PublicFunction.MergeCol(tableData, "item", rowIndex);}}</script>
总结：
以上就是今天要讲的内容，本文仅仅简单介绍了公共js封装以及使用合并单元格
