首页 > 其他分享 >elementplus vue3 table表格动态合并单元格

elementplus vue3 table表格动态合并单元格

时间:2024-09-06 16:36:40浏览次数:11  
标签:count elementplus const 单元格 tableList cellList vue3 fCol fRow

let cellList: any[] = [] // 单元格数组
let count: number = 0 // 计数

const computeCell = (tableList: any[], name) => {
  cellList = []
  count = 0
  for (let i = 0; i < tableList.length; i++) {
    if (i === 0) {
      // 先设置第一项
      cellList.push(1); // 初为1,若下一项和此项相同,就往cellList数组中追加0
      count = 0; // 初始计数为0
    } else {
      if (tableList[i][name] == tableList[i - 1][name]) {
        cellList[count] += 1; // 增加计数
        cellList.push(0); // 相等就往cellList数组中追加0
      } else {
        cellList.push(1); // 不等就往cellList数组中追加1
        count = i; // 将索引赋值为计数
      }
    }
  }
}
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
  // 排科室
  if (columnIndex === 1) {
    computeCell(tableDatas.value, 'name')
    const fRow = cellList[rowIndex]
    const fCol = fRow > 0 ? 1 : 0
    return {
      rowspan: fRow, // 合并的行数
      colspan: fCol // 合并的列数,为0表示不显示
    }
  }

  // 排工序
  if (columnIndex === 2) {
    computeCell(tableDatas.value, 'gx')
    const fRow = cellList[rowIndex]
    const fCol = fRow > 0 ? 1 : 0
    return {
      rowspan: fRow, // 合并的行数
      colspan: fCol // 合并的列数,为0表示不显示
    }
  }
}

 

然后再table加上 :span-method="objectSpanMethod"

 

标签:count,elementplus,const,单元格,tableList,cellList,vue3,fCol,fRow
From: https://www.cnblogs.com/hpx2020/p/18400521

相关文章

  • vue3 实现无感刷新token
    问题一:如何防止多次刷新token通过设置一个变量isRefreshing去控制是否在刷新token的状态if(!isRefreshing){isRefreshing=truereturnrefreshToken().then((data:any)=>{setToken(data.token_type+''+data.access_token);//存储token过期时换取新token值localStora......
  • vue3中computed和watch的使用
    一computd计算属性computed是Vue3中用于创建计算属性的功能。它允许你定义基于响应式数据的动态值,这些值会在其依赖的数据发生变化时自动更新。使用场景依赖于其他响应式数据的计算结果:你可以创建一个计算属性,其值依赖于其他响应式数据,并在这些数据变化时自动更新。......
  • 关于Vue2和Vue3的区别及组合式/选项式API区别——高频面试题
    1、vue2和vue3的区别以下包含但不仅仅只有这10条区别但是,在应对面试时,回答已经足够用了,这些也是vue2和vue3的主要区别CompositionAPIvsOptionsAPICompositionAPI:组合式APIOptionsAPI:选项式API——在vue2中使用它们两者在vue3中是组织代码的不同方式Vue3引入了Com......
  • vue3 tsx 测试几种使用方式
    总论tsxsetup里面定义了returndom元素,则optionsapi的render函数不生效options的render函数生效前提是setup里面不能returndomoptions的render里面可以直接使用this访问setup里面的数据或者ctxtsx一般最好用defineComponent包裹,这样响应式才能生效tsxdom语法使用{}......
  • Vue3 中的状态管理:Vuex vs Pinia 深度分析
    Vue3中的状态管理:VuexvsPinia深度分析在现代前端开发中,状态管理是一个至关重要的方面。尤其是在大型应用中,如何高效、清晰地管理状态不仅影响着代码的可读性和可维护性,还对应用的性能有直接的影响。在Vue3中,Vuex和Pinia是两种主要的状态管理库,这两者各有不同的设......
  • 在 Vue3 中使用 CSS Modules 实现样式隔离
    在Vue3中使用CSSModules实现样式隔离随着构建现代前端应用的需要,样式的管理和隔离变得越来越重要。为了解决样式冲突和管理困难的问题,CSSModules应运而生。今天,我们将讨论如何在Vue3中使用CSSModules实现样式隔离,特别是在使用新的setup语法糖的情况下。什么......
  • vxe-table 自定义单元格样式
    <template><div><vxe-tableborderclass="mytable-style":header-cell-class-name="headerCellClassName":row-class-name="rowClassName":cell-class-name="cellClassName&quo......
  • vue3+vite+echarts集成中国地图
    前段时间我们的项目有使用到echarts集成中国地图的功能,实际上这个功能我进项目组的时候人家就已经完成了,我这边只是简单复刻了一遍,先看看效果图;上代码,走起<template><!--第一步:设置地图容器--><divid="map"style="width:100vw;height:100vh"></div></template>......
  • 计算机毕业设计springboot+vue3便民医疗服务预约系统 原生微信小程序
    目录博主介绍技术栈开发核心技术具体实现截图前端后端java类核心代码部分展示可行性论证技术可行性详细视频演示系统测试实现思路源码获取博主介绍......
  • LigerUI 中的 Grid (ligerGrid) 合并单元格
    在网上搜索了很都都没有正确的方法实现合并单元格,LigerGrid不像 EasyUI 中的Grid可以直接合并单元格。我化了点时间,解决了,就分享给大家,我就不做详细的注释,只有有一定基础的都可以看懂,菜鸟就自己去补习吧。<divid="maingrid"style="margin:0;padding:0"></div......