VUE table数据合并单元格

1.el-table标签里添加 :span-method=“方法名”(前面加“:”表示动态数据),在方法中处理合并行/列的逻辑。

      <el-table
        ref="orderingTable"
        :span-method="objectSpanMethod"
      ></el-table>

2.首先看看官网的例子,但是很难满足需要

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于设置要合并的列
          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
              rowspan: 2,     //合并的行数
              colspan: 1          //合并的列数,设为0则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

3.排序好的数据进行合并js(亲测好用)

/**
 1.  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal]) {
        mList[rowVal]++
        data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = 1
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}
//这是单独的引入,写在js上,我单独摘出来为了方便看
import { mergeTableRow } from "@/api/lib/airtjtool";

4.没有排好序的

/**
 1. 改良后(不相邻的数据相互不受影响)
 2.  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal] && mList[rowVal].newIndex === index) {
        mList[rowVal]['num']++
        mList[rowVal]['newIndex']++
        data[mList[rowVal]['index']][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

5.主要调用如下

created(){
  // 给table赋值,重新遍历新增rowSpan属性,checkRoom,appointmentTime为table里面需要合并的属性名称,根据自己需要给表赋值
  this.table = mergeTableRow(this.table, ['checkRoom', 'appointmentTime'])
},
methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     //合并列的属性
     const span = column['property'] + '-span'
     if(row[span]){
         return row[span]
     }
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一眨眼,你走了将近半年了,可那天的事情还历历在目,仿佛就在昨天。事事想到你,想到个矫情的词—“睹物思人”。 你怎么...
    念九卿阅读 72评论 0 0
  • 每天进步一点点,资源和定金一定会源源不断的到来
    靳果果阅读 75评论 0 0
  • 1 今日,宝贝儿媳妇带乖宝宝去游泳了,我可爱的小乖乖,你好勇敢呀!竟然没有哭,游的还挺自然呢。比奶奶强...
    独行侠的快乐阅读 131评论 0 0
  • 人性,来自“自私”的基因。 道德,是为了群体的繁荣,最后促进个体的生存、繁衍,大家共同达成的“社会契約”。道德,常...
    日益精进的mvp阅读 147评论 0 0
  • 我家的大花园 我家有个大花园 花园里有百花 有小草 有大树 也有很多可爱的园丁 我散步时经常看到他们在精心整理着花...
    曹爽阅读 195评论 0 1