element ui el-table单元格按需合并

从来没有好好地有条理的整理过代码，也是因为没有信心能写好，今天心血来潮写一篇尝试一下。

---

问题描述

element ui 中 el-table 按需合并单元格
本文中代码举例，根据 project_name 字段的值进行合并

---

相关代码展示

	<el-table
	  :data="table_list"
	  :span-method="arraySpanMethod"
	  border
	  :header-cell-style="{background:'#F0F2F5',color:'#666666',fontWeight: '400',padding: '7px 0'}"
	  style="width: 100%; margin-top: 20px">
	  <el-table-column
	    type="index"
	    label="项目ID"
	    width="180">
	  el-table-column>
	  <el-table-column
	    prop="project_name"
	    label="项目名称">
	  el-table-column>
	  <el-table-column
	    prop="event_name"
	    label="事件名称">
	  el-table-column>
	el-table>

span-method 是element ui 提供的合并行或列的计算方法

	export default {
	  name: 'app',
	  components: {
	  },
	  data(){
	    return {
	      table_list: [
	        {
	          project_name: '项目一',
	          event_name: '项目一事件一'
	        },
	        {
	          project_name: '项目一',
	          event_name: '项目一事件二'
	        },
	        {
	          project_name: '项目二',
	          event_name: '项目二事件一'
	        },
	        {
	          project_name: '项目三',
	          event_name: '项目三事件一'
	        },
	        {
	          project_name: '项目三',
	          event_name: '项目三事件一'
	        },
	      ],
	      mergeArr: [],  //遍历数据时，根据相同的标识去存储记录
	      mergePos: 0, // 数组mergeArr的索引
	    }
	  },
	  created(){
	    // 要合并的数组的方法
	    this.merge(this.table_list)
	    // 如果是通过调接口获取的table数据，则需要在 this.table_list = res.list 之后 this.merge(this.table_list)
	  },
	  methods:{
	    // 合并table数据 table有多少单元格，该函数执行多少次
	    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
	      // row：行，column：列 ，rowIndex:0,当前行号，columnIndex:0,当前列号，
	      // [rowIndex，columnIndex]定位到某个具体的单元格
	      // 要合并的是哪一列，columnIndex就等于几
	      if (columnIndex === 1) {
	        const _row = this.mergeArr[rowIndex];
	        // _row的值表示 从 columnIndex 列开始往下合并几个格子，值>0：值为几表示合并几个格子，值<=0：该单元格已向上合并
	        const _col = _row > 0 ? 1 : 0; //如果_col == 0，则这个单元向上合并
	        return {
	          rowspan: _row,
	          colspan: _col,
	        };
	        // 需要被向上合并的单元格 return{ rowspan:0,colspan: 0 }
	      }
	    },
	    // 要合并的数组的方法
	    merge(tableData) {
	      this.mergeInit();
	      for (var i = 0; i < tableData.length; i++) {
	        if (i === 0) {
	          // 如果是第一条记录直接往数组push,第一条记录必须存在，不用考虑合并与否
	          this.mergeArr.push(1);
	          this.mergePos = 0;
	        } else {
	          // 不是第一条记录的情况，则下一个元素与上一个元素进行对比，判断是否相同，相同则合并
	          // 判断当前元素与上一个元素是否相同，project_name为判断条件
	          if (tableData[i].project_name === tableData[i - 1].project_name) {
	            // 需要合并的情况，合并的格子数+1
	            this.mergeArr[this.mergePos] += 1;
	            // 向上合并的单元格也要 用 0 占位
	            this.mergeArr.push(0);
	          } else {
	            this.mergeArr.push(1);
	            this.mergePos = i;
	          }
	        }
	        // console.log(this.mergeArr);
	        // table根据 this.mergeArr里面的值来进行单元格的合并
	      }
	    },
	    mergeInit() {
	      //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
	      this.mergeArr = [];
	      this.mergePos = 0;
	    },
	  }
	}

---

参考文献

参考文章1
参考文章2