【Vue】动态合并行

前言:

开发中会经常使用到表格例如el-table,还会经常用到合并行或合并列,el-table提供了对应的方法,但是官方文档中的方法是固定的行数或列数,如果我们想要根据接口获取到的动态数据去合并行或合并列应该怎么实现呢,可以自己去封装一个方法。
代码如下:

javascript 复制代码
/**
1.首先在工具文件中定义一个合并行的方法rowMethod
2.然后在el-table需要合并的地方去调用rowMethod方法
**/
// 1.util-->index.js
// 合并行
export function rowMethod(columnArr, tableData) {
  // columnArr 合并行所在的列字段
  // tableData需要合并的动态表格数据
  let column = {}
  let position = 0
  // 遍历合并的列数据
  columnArr.forEach((prop) => {
    column[prop] = []
    //  遍历合并的行数据
    tableData.forEach((row, rowIndex) => {
      // 第N列第一行
      column[prop][rowIndex] = [1, 1]
      if (rowIndex === 0) {
        // 记录当前行号
        position = 0
      } else if (row[prop] === tableData[rowIndex - 1][prop]) {
        // 当前行数据等于上一行,根据记录的行号,计算需要合并几行。
        column[prop][position][0] += 1
        // 当前行 隐藏不显示
        column[prop][rowIndex][0] = 0
      } else {
        // 不相等之后,重置记录行号
        position = rowIndex
      }
    })
  })
  return column
}
//2.在table.vue页面中引入并使用
import {rowMethod} from '../util/index.js'
<template>
<el-table stripe border :data="tableData" :span-method="objectSpanMethod">
   <el-table-column></el-table-column>
</el-table>
</template>

export dafault {
  method: {
	objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	  let newRow = colMethod(['列名'], 表格数据)
      let newArray = newRow[column.property] || []
      if (column.type === 'index' && newRow(['列名'])) {
        return newRow['列名'][rowIndex]
      } else if (newArray.length) {
        return newArray[rowIndex]
      } else {
        return [1, 1]
      }
     }
	}
}
相关推荐
运维-大白同学20 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple2 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式