zoukankan      html  css  js  c++  java
  • Vue+element 表格Table合并问题

     
    <el-table
            :data="gridlist"
            :span-method="objectSpanMethod"
            ref="table"
            tooltip-effect="dark"
            border
            stripe
            style=" 100%"
          >
    首先就是在table上添加:span-method="objectSpanMethod"方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 2) {
            if (rowIndex % 5 === 0) {
              return {
                rowspan: 5,
                colspan: 1,
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0,
              }
            }
          }

          if (columnIndex === 8) {
            if (rowIndex % 5 === 0) {
              return {
                rowspan: 3,
                colspan: 1,
              }
            } else if ((rowIndex - 3) % 5 === 0) {
              return {
                rowspan: 2,
                colspan: 1,
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0,
              }
            }
          }
          if (columnIndex === 9 || columnIndex === 10) {
            if (rowIndex % 5 === 0) {
              return {
                rowspan: 5,
                colspan: 1,
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0,
              }
            }
          }
          if (columnIndex === 11) {
            if (rowIndex === 0) {
              return {
                rowspan: this.gridlist.length,
                colspan: 1,
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0,
              }
            }
          }
        },
    效果图就是这样
  • 相关阅读:
    写MBA毕业论文有感-重口味,不喜莫入
    Android中级第三讲如何复用AlertDialog
    Android初级开发第二讲项目学习
    那些消失的计算机技术(一)
    Android中级第一讲如何学习Android自带的demo项目
    Java基础之continue与break区别
    刨根问底系列之C++ const 挖掘
    Unity3d http 通信
    Windows Phone 7 不温不火学习之《启动器与选择器》
    Windows Phone7 不温不火学习之《应用程序生命周期》
  • 原文地址:https://www.cnblogs.com/fkxx/p/15439238.html
Copyright © 2011-2022 走看看