美文网首页
element 合并单元格 数据合并展示不正确

element 合并单元格 数据合并展示不正确

作者: 懿小诺 | 来源:发表于2023-06-20 19:28 被阅读0次

    合并单元格想要的效果:


    image.png

    合并单元格需要三步:
    1.合并相同的单元格 计算数量
    2.使用span-method分发合并
    3.鼠标移上去背景色效果实现

    1.第一步此步骤一定要在数据拿到之后给再渲染

    getOrderNumber () { // 合并内容相同的单元格
            let contactDot = 0
            const OrderIndexArr = []
            this.previewPlanList.forEach((item, index) => {
              if (index === 0) {
                OrderIndexArr.push(1)
              } else {
              // 注释:name  是对应体系,data 对应table绑定的数据源
                if (item.mergeId === this.previewPlanList[index - 1].mergeId) {
                  OrderIndexArr[contactDot] += 1
                  OrderIndexArr.push(0)
                } else {
                  contactDot = index
                  OrderIndexArr.push(1)
                }
              }
            })
            this.OrderIndexArr = OrderIndexArr
          }
    

    2.第二步span-method

     objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 7 || columnIndex === 8) {
            if (this.OrderIndexArr[rowIndex]) {
              return {
                rowspan: this.OrderIndexArr[rowIndex],
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          } else {
            return {
              rowspan: 1,
              colspan: 1
            }
          }
        },
    

    3.鼠标移入背景色

      // 鼠标进入单元格
        handleMouseEnter (row, column, cell, event) {
          this.arr.forEach((item) => {
            if (row.mergeId === item.mergeId) {
              this.rowIndex = row.mergeId
            }
          })
        },
        // 给相应的rowIndex添加类名
        rowClassName ({ row, rowIndex }) {
          // console.log(row, rowIndex);
          let r = -1
          this.arr.forEach((item) => {
            if (this.rowIndex === row.mergeId) {
              r = rowIndex
            }
          })
          if (rowIndex === r) {
            return 'hovered-row'
          }
        },
        // 鼠标离开
        handleMouseLeave (row, column, cell, event) {
          this.rowIndex = -1
        }
    

    注意:


    image.png

    相关文章

      网友评论

          本文标题:element 合并单元格 数据合并展示不正确

          本文链接:https://www.haomeiwen.com/subject/hqxuydtx.html