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>

顯示效果