el-table span-method 与空白单元格合并

最新推荐文章于 2023-08-10 09:15:57 发布

弓弓弓長

最新推荐文章于 2023-08-10 09:15:57 发布

阅读量262

点赞数 1

文章标签： javascript elementui vue

本文链接：https://blog.csdn.net/weixin_46939955/article/details/129061677

版权

el-table span-method 与空白单元格合并

原始excel表格样式：
在这里插入图片描述
页面呈现的表格样式：

代码如下

// An highlighted block
<el-table :data="showList" :span-method="arraySpanMethod">
   ...
</el-table>

	// 数据处理
	dealData (rowCell) {
	  let indexList= [], locationList = []
	  // 如果单元格不为空，找到对应的index
	  list[1].forEach((item, index) => {if (item[rowCell] != '') {indexList.push(index)}});
	  // 数据最后一项也push进去，用于合并总列数计算
	  indexList.push(list[1].length)
	  // 计算有数据列距下一个有数据列的列数：rowspan
	  indexList.forEach((item, index) => {
	    if (index == indexList.length - 1) return
	    locationList[`'${item}'`] = ({ rowspan: indexList[index + 1] - item, colspan: 1 })
	  })
	  return locationList
	},
	// 单元格合并方法
  	arraySpanMethod ({ row, rowIndex, columnIndex }) {
      if (columnIndex === 1) { // 此处代表我要合并第一列
        if (row.t1 != '') { // 如果此单元格不为空，进行数据处理
          // 处理合并数据
          let locationList = this.dealData('t1')
          return locationList[`'${rowIndex}'`]
        }
        else {  // 为空则隐藏
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }