【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]
      }
     }
	}
}
相关推荐
陈琦鹏19 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam1 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的3 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀4 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce5 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L5 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊5 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选6 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly