Vue+el-table表格合并

1. 作为一个小菜鸟，被要求做一个表格合并，咱以前也没用过vue，好在以前用过layui，也不算纯前端小白，经过我几天查找研究，找到一个人家写的很好的案例，拿过来记录一下。废话不多说，上代码。
2. el-table标签里添加 :span-method=“方法名”（前面加“:”表示动态数据），在方法中处理合并行/列的逻辑。

<el-dialog :title="title"
               :visible.sync="computeFlag"
               :span-method="objectSpanMethod"
               width="1050px"
               append-to-body>

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

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

4. 排序好的数据进行合并js（亲测好用）

export 如何在vue中引用

/**
 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";

5. 没有排好序的（本人没试）

/**
 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
}

6. 主要调用如下

data() {
  return {
    table: [{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT',
      checkMoney: '300.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT1',
      checkMoney: '303.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT22',
      checkMoney: '340.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 10：30'
    },{
      id: '1',
      checkRoom: 'DR',
      checkProject: '鼻骨',
      checkMoney: '500.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 9：30'
    }]
  };
},
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]
     }
  }
}

7.效果图如下

8. 最后补充：后面如果有按钮列也可以进行合并，配置标签中的prop，可以对应前面“检查室合并的行对齐”，只需要按钮的表格属性和想合并行列的属性一样prop就可以。

<el-table-column align="right"  prop="id"
                         label="操作">

          <template>
            <el-button size="mini"
                       @click="over()">按钮</el-button>

          </template>
        </el-table-column>

• 欢迎指正谢谢！！