ElementUI用法拓展：table组件-如何把相同的值合并为同一行/列

废话不多说，直接上代码，里面有详细注释！

<template>
  <div>
    <el-table
      border
      :span-method="spanMethod"
      :data="tableList"
    >
      <el-table-column label="省" align="center" width="200">
        <template slot-scope="{row}">
          <div>{{ row.province }}</div>
        </template>
      </el-table-column>
      <el-table-column label="名字" align="center" width="250">
        <template slot-scope="{row}">
          <p>{{ row.name }}</p>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      tableList: [
        { province: '广东省', name: '张三' },
        { province: '广东省', name: '张三' },
        { province: '广东省', name: '张三' },
        { province: '广西省', name: '张三' },
        { province: '湖南省', name: '张三' },
        { province: '湖南省', name: '张三' },
        { province: '湖南省', name: '张三' },
        { province: '湖南省', name: '张三' }
      ],
      indexArray: []
    }
  },
  mounted() {
    // tableList每次变化，到需要调这个方法,获取一个二维数组。
    this.getIndexArray('province')
  },
  methods: {
    getIndexArray(e) {
      const indexObject = {}
      //   this.indexArray = []
      // 遍历tableList，将需要合并的相同项作为indexObject对象的键，然后将所有相同的键的index，添加进去。
      // 得到一个对象：{'广东省':[1,2,3],'湖南省':[6,7,8]}
      this.tableList.forEach((item, index) => {
        if (indexObject[item[e]]) {
          indexObject[item[e]].push(index)
        } else {
          indexObject[item[e]] = []
          indexObject[item[e]].push(index)
        }
      })
      console.log(indexObject, 'indexObjectindexObjectindexObject')
      // 将每个键中，数组长度大于1的值，取出，存储到this.indexArray（也就是需要合并的项）
      // 得到一个二维数组：[[1,2,3],[6,7,8]]
      for (const k in indexObject) {
        if (indexObject[k].length > 1) {
          this.indexArray.push(indexObject[k])
        }
      }
      console.log(this.indexArray, ' this.indexArray')
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.indexArray.length; i++) {
          // 取出第一组数组
          const element = this.indexArray[i]
          for (let j = 0; j < element.length; j++) {
            const item = element[j]
            // 如果当前列等于数组第一个的值时，会向下兼并多行，否则为其它值时，就不占据行数和列数
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length, // 占据的行数为数组长度，向下
                  colspan: 1// 占据的列数
                }
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    }
  }
}
</script>

最后实现的效果