提示:公共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封装以及使用合并单元格