【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]
      }
     }
	}
}
相关推荐
待磨的钝刨32 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半9 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js