欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iview 动态合并table组件单元格

程序员文章站 2024-02-28 17:35:52
...

原文章地址:https://blog.csdn.net/wakaka112233/article/details/107210611

HTML代码
 // :span-method="handleSpan" 给想要合并的table组件绑定方法
<div>
   <Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</div>
// iview 单元格合并
  handleSpan ({ row, column, rowIndex, columnIndex }) {
      //合并第1列,这里columnIndex==0,根据需求的不同,需要前端写死
      if(columnIndex == 0) {
          //计算合并的行数列数
          let x = row.mergeColumn == 0 ? 0:row.mergeColumn
          let y = row.mergeColumn == 0 ? 0:1
          return [x, y]
      }
      //合并第4列
      if(columnIndex == 4) {
          //计算合并的行数列数
          let x = row.mergeColumn == 0 ? 0:row.mergeColumn
          let y = row.mergeColumn == 0 ? 0:1
          return [x, y]
      }
  },
  assembleData(data){
      let names = []
      //筛选出不重复的 name值,将其放到 names数组中
      data.forEach(e => {
          if(!names.includes(e.jobName)){
              names.push(e.jobName)
          }
      })
      let nameNums = []
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach(e => {
          nameNums.push({jobName:e,num:0})
      })
      //计算每种 name值所在行需要合并的单元格数
      data.forEach(e => {
          nameNums.forEach(n => {
              if(e.jobName == n.jobName){
                  n.num++
              }
          })
      })
      //将计算后的合并单元格数整合到 data中
      data.forEach(e => {
          nameNums.forEach(n => {
              if(e.jobName == n.jobName){
                  if(names.includes(e.jobName)){
                      e.mergeColumn = n.num
                      //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                      names.splice(names.indexOf(n.jobName),1)
                  } else {
                      //被合并的单元格设置为 0
                      e.mergeColumn = 0
                  }
              }
          })
      })
      //将整理后的数据交给表格渲染
      this.identicalList = data
  },
  mounted(){
/**-- 在mounted中将想要合并的数组放入方法中使这个数组相同名字的单元格合并 --**/
        this.assembleData(this.resData)
    }

上一篇: CCF 数据中心

下一篇: