首页 > 其他分享 >element 合并单元格方法

element 合并单元格方法

时间:2023-04-27 10:36:51浏览次数:34  
标签:rowspan const nameSpan colspan 单元格 合并 element columnIndex return

你的数据是需要排列好的, 把所有一样的数据都排序到一起

// 获取需要合并的位置
const getSpanNumber = (data: User[], prop: string) => {
  const length = data.length
  if (length > 0) {
    let position = 0
    let temp = data[0][prop]
    const result = [1]
    for (let i = 1; i < length; i++) {
      if (data[i][prop] === temp) {
        result[position] += 1
        result[i] = 0
      } else {
        position = i
        result[i] = 1
        temp = data[i][prop]
      }
    }
    return result
  }

  return [0]
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    const nameSpan = getSpanNumber(tableData, 'classId')
    return {
      rowspan: nameSpan[rowIndex],
      colspan: 1,
    }
  }
  if (columnIndex === 6) {
    const nameSpan = getSpanNumber(tableData, 'classId')
    return {
      rowspan: nameSpan[rowIndex],
      colspan: 1,
    }
  }

  if (columnIndex === 5) {
    const nameSpan = getSpanNumber(tableData, 'classId')
    return {
      rowspan: nameSpan[rowIndex],
      colspan: 1,
    }
  }
}

如果手动去判断合并单元格则需要把被占位的单元格的空间设置为 0(此处是合并列)


// 这里合并了 第一列名为 本章均值 , 此处占位两列也就是说把第二列的空间占用了
  if (columnIndex === 0) {
        console.log(column);

        if (row.sectionName == '本章均值') {
            return {
                rowspan: 1,
                colspan: 2
            }
        }
    }
  // 这里就要把第二列名为 本章均值 设置为 0 因为他的空间被上面的占走了
  if (columnIndex === 1) {
        if (row.sectionName == '本章均值') {
            return {
                rowspan: 1,
                colspan: 0
            }
        }
    }
    
    return {
        rowspan: 1,
        colspan: 1
    }

标签:rowspan,const,nameSpan,colspan,单元格,合并,element,columnIndex,return
From: https://www.cnblogs.com/shiazhen/p/17358204.html

相关文章

  • 合并两个有序链表--Python实现
    将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。#Definitionforsingly-linkedlist.#classListNode:#def__init__(self,x):#self.val=x#self.next=NoneclassSolution:defmergeT......
  • 合并两个git仓库的不同分支
    场景说明:在A仓库开发,在某一时刻因为一些原因,将A仓库copy为B仓库继续开发,现在需要将B仓库的变更同步到A仓库,保存提交历史操作步骤如下:1.拉取干净的A仓库与B仓库到本地,目录为A和B(保留.git目录)2.将B仓库添加为A仓库的远程仓库cdAgitremoteaddrepo-B../B-这里远程的B仓......
  • #yyds干货盘点# LeetCode面试题:合并两个有序数组
    1.简述:给你两个按非递减顺序排列的整数数组 nums1和nums2,另有两个整数m和n,分别表示nums1和nums2中的元素数目。请你合并nums2到nums1中,使合并后的数组同样按非递减顺序排列。注意:最终,合并后数组不应由函数返回,而是存储在数组nums1中。为了应对这种情况,nums1......
  • element-ui el-dialog中引用组件,为何组件只加载一次
    最近开发项目,页面中引入组件,2次展示,组件中生命周期都不调取,导致网组件中传的值不更新;<el-dialogv-dialogDragtitle="巡检记录":visible.sync="patrolItemVisible":show-close="true":close-on-press-escape="true":close-on-click-modal="true":appen......
  • 遇到 element-ui 框架的警告 `[Element Warn]please pass correct props!`
     第二行发现是校验表单项报错,到代码中查看原来是没有给 el-form 表单中的 el-form-item 传prop参数,这个prop参数是表单域 model字段,在使用 validate、validateField、resetFields 等方法的情况下,该属性是必填的......
  • 解决的Windows11的反人类<一>——任务栏强制合并问题
    开始前,先干一次微软的UI设计,脑子有泡的*****设计师,F******U!干完微软,进入正题。。。。0)、需要的工具——dxgi.dll,下载→ https://pan.baidu.com/s/1dZCoM4m7gxg-dTEt1DslzA提取码:8d5w ;1)、dxgi.dll放入“C:\Windows”目录下;2)、打开任务管理器重启“Windows资源管理......
  • Vue3 + element-plus使用注意
    1.给组件设置ref="xxx"例如:<el-tableref="tableRef"定义tableRef时,需要注意尽量使用ref()而非ref(null)consttableRef=ref();因为使用ref(null)会得不到$el的相关属性,即undefined例如:表格自适应高度consttableRef=ref();constsetTableHeight=()=>......
  • Element-Plus中表格的使用
    table的使用基础使用el-table是整个表格,其中的data是整个列表要展示的数据。一般我们使用表格所展示的内容都是数组嵌套对象的形式,width就是指定整个表格的宽度,也就是基础的css样式。其中每一列使用el-table-column来包裹,在el-table-column中prop表示数组中每一项元素的建,label......
  • Element之container容器布局
    作用:用来快速搭建页面基本结构<el-container>:最外层容器标签<el-header>:头部容器标签<el-aside>:侧面容器标签<el-main>:主要内容容器标签<el-footer>:底部容器标签注:以上标签采用的是flex弹性盒布局,本人还是比较喜欢用的(不会的可以去搜索相关教程,还是比较实用的)常见......
  • vue 使用Element 的form表单如何校验对象中的对象属性?
    1、校验对象中的对象属性,需要特殊处理下:<templatev-if="form.dataType===0"><el-form-itemlabel="芯片类型"prop="configExtend.schemeVersion"><el-selectv-model="form.configExtend.schemeVersion&quo......