Vue小白教程：element表格合并

1. spanArr中保存的是需要合并行数的指示，例如需要制作如下表格：
   
   第一列前三行合并，后两行合并，则spanArr=[3,0,0,1,2,0]。第一个3表示需要合并三行，后两个0表示第二行和第三行被合并，1表示第四行显示为一行，2表示合并两行，0表示最后一行被合并。
   
2. el-table中使用:span-method绑定合并函数，本文中为objectSpanMethod
3. 合并函数objectSpanMethod（官方文档）

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
其中rowspan表示合并的行数，colspan表示合并的列数

代码

<template>
  <div>
    <el-button>
      配置权重
    </el-button>
    <el-table
      :data="modelDataList"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="key"
        label="一级指标"
        width="100px">
      </el-table-column>
      <el-table-column
        prop="val"
        label="一级指标权重"
        width="150px">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="一级指标描述">
      </el-table-column>
      <el-table-column
        prop="keySecond"
        label="二级指标（对应具体校验规则）">
      </el-table-column>
      <el-table-column
        prop="valSecond"
        label="二级指标权重">
      </el-table-column>
      <el-table-column
        prop="remarkSecond"
        label="二级指标描述">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        spanList: [],
        number: 0,
        modelDataList: [{
          key: '准确性',
          val: 15,
          remark: '准确性用于。。。',
          keySecond: '值域校验',
          valSecond: 6,
          remarkSecond: '用于校验数据是否符合值域要求'
        }, {
          key: '准确性',
          val: 15,
          remark: '准确性用于。。。',
          keySecond: '数据范围校验',
          valSecond: 12,
          remarkSecond: '用于校验数据是否在合理范围内'
        }, {
          key: '准确性',
          val: 15,
          remark: '准确性用于。。。',
          keySecond: '字段值对比',
          valSecond: 9,
          remarkSecond: '通常用于一个字段或其他字段'
        }, {
          key: '一致性',
          val: 15,
          remark: '一致性用于。。。',
          keySecond: '主外键一致性校验',
          valSecond: 17,
          remarkSecond: '用于校验业务上'
        }, {
          key: '完整性',
          val: 25,
          remark: '完整性用于。。。',
          keySecond: '空值校验',
          valSecond: 15,
          remarkSecond: '用于校验数据是否存在空值'
        }, {
          key: '完整性',
          val: 25,
          remark: '完整性用于。。。',
          keySecond: '记录数缺失',
          valSecond: 16,
          remarkSecond: '用于校验数据是否存在关联记录丢失'
        }, {
          key: '唯一性',
          val: 15,
          remark: '唯一性用于。。。',
          keySecond: '唯一性校验',
          valSecond: 17,
          remarkSecond: '用于校验数据是否存在重复'
        }]
      }
    },
    created () {
      let contactDot = this.modelDataList[0].key
      let numberNow = this.number
      let spanArr = []
      let data = this.modelDataList
      data.forEach((item, index) => { // 遍历数据记录需要合并的行数保存在spanArr中
        if (item.key === contactDot) { // 相同
          numberNow += 1
        } else {
          spanArr.push(numberNow)
          contactDot = item.key// 重新赋值标识
          while (numberNow > 1) { // 赋值0
            spanArr.push(0)
            numberNow -= 1
          }
        }
        if (index === data.length - 1) { // 到最后一个了，把没有push的项处理完
          spanArr.push(numberNow)
          contactDot = item.key
          while (numberNow > 1) {
            spanArr.push(0)
            numberNow -= 1
          }
        }
      })
      this.spanList = spanArr
      console.log(spanArr)
    },
    methods: {
      objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { // 第一列、第二列和第三列
          if (this.spanList[rowIndex] === 0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            return {
              rowspan: this.spanList[rowIndex],
              colspan: 1
            }
          }
        }
      }
    }
  }
</script>
<style scoped>

</style>

显示效果