2021-09-13 element动态合并相同行

学习目标：

提示：行数据相同进行合并操作

---

学习内容：

知识点：
1、 熟悉elementUI
2、 掌握 vue 基本语法

---

学习产出：

提示：这里统计学习计划的总量

<template>
  <div>
    <el-table
      :data="dataSource"
      border
      stripe
      :span-method="objectSpanMethods"
      style="width:80%"
    >
      <el-table-column
        v-for="col in columns"
        :key="col.id"
        :prop="col.id"
        label="col.label"
        :min-width="col.width"
      />
    </el-table>
  </div>
</template>
<script>

export default {
  data () {
    return {
      dataSource: [{
        area: '亚洲',
        type: 'C类',
        name: '中国',
        code: '2021-09-13',
        description: '伟大的国家'
      }, {
        area: '亚洲',
        type: 'C类',
        name: '中国',
        code: '2021-09-13',
        description: '东亚'
      }, {
        area: '美洲',
        type: 'C类',
        name: '美国',
        code: '2021-09-13',
        description: 'GDP第一'
      }, {
        area: '亚洲',
        type: 'A类',
        name: '日本',
        code: '2021-09-13',
        description: '东亚'
      }, {
        area: '亚洲',
        type: 'A类',
        name: '日本',
        code: '2021-09-13',
        description: '寿司'
      }, {
        area: '美洲',
        type: 'C类',
        name: '美国',
        code: '2021-09-16',
        description: '自由女神像'
      },
      {
        area: '亚洲',
        type: 'A类',
        name: '朝鲜',
        code: '2021-09-13',
        description: '东亚'
      },
      {
        area: '亚洲',
        type: 'A类',
        name: '朝鲜',
        code: '2021-09-13',
        description: '位于东亚朝鲜半岛北部'
      }, {
        area: '亚洲',
        type: 'C类',
        name: '塔吉克斯坦',
        code: '2021-09-13',
        description: '无相关信息'
      }],
      columns: [{
        id: 'area',
        label: '区域',
        width: '10%'
      }, {
        id: 'type',
        label: '类别',
        width: '10%'
      }, {
        id: 'name',
        label: '国家名',
        width: '10%'
      }, {
        id: 'code',
        label: '编号',
        width: '20%'
      }, {
        id: 'description',
        label: '描述',
        width: '50%'
      }],
      spanObj: { firstCol: [], secondCol: [], thirdCol: [] }
    }
  },
  mounted () {
    const returnTableResult = this.mergeTheSameRow(this.dataSource, ['area', 'type', 'name'])
    this.spanObj.firstCol = returnTableResult[0]
    this.spanObj.secondCol = returnTableResult[1]
    this.spanObj.thirdCol = returnTableResult[2]
  },
  methods: {
    // 获取到要比较的具体数值，option为要进行比较的每项数据，propName为要比较的具体属性
    getValue (option, propName) {
      if (!propName) {
        return option
      }
      let data = option
      propName.split('.').filter(function (item) {
        data = data[item]
      })
      return data + ''
    },
    // 合并相邻两行同类型的数据（只对第一列、第二列生效）
    objectSpanMethods ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row1 = this.spanObj.firstCol[rowIndex]
        const _col1 = _row1 > 0 ? 1 : 0
        return {
          rowspan: _row1,
          colspan: _col1
        }
      }
      if (columnIndex === 1) {
        const _row2 = this.spanObj.secondCol[rowIndex]
        const _col2 = _row2 > 0 ? 1 : 0
        return {
          rowspan: _row2,
          colspan: _col2
        }
      }
      if (columnIndex === 2) {
        const _row3 = this.spanObj.thirdCol[rowIndex]
        const _col3 = _row3 > 0 ? 1 : 0
        return {
          rowspan: _row3,
          colspan: _col3
        }
      }
    },
    // 将内容按某个字段排序（中文排序），此时先比较第一列，做合并之后再在当前的基础上依次比较剩余列，arr为要进行比较的数组，propArr为要比较的所有属性的集合
    sortChinese (arr, propArr) {
      propArr.map((prop, index) => {
        if (index === 0) {
          arr.sort((item1, item2) => {
            return this.getValue(item1, prop).localeCompare(this.getValue(item2, prop), 'zh-CN')
          })
        } else {
          arr.sort((item1, item2) => {
            if (item1[propArr[index - 1]] === item2[propArr[index - 1]]) {
              return this.getValue(item1, prop).localeCompare(this.getValue(item2, prop), 'zh-CN')
            }
          })
        }
      })
    },
    // 合并表格相同的行，table为要进行比较的数组，columnCollections为要比较的所有属性的集合
    mergeTheSameRow (table, columnCollections) {
      this.sortChinese(table, columnCollections)
      const firstColArr = []; const secondColArr = []; const thirdColArr = []
      let firstPos = 0; let secondPos = 0; let thirdPos = 0
      for (let i = 0; i < table.length; i++) {
        if (i === 0) {
          firstColArr.push(1)
          firstPos = 0
          secondColArr.push(1)
          secondPos = 0
          thirdColArr.push(1)
          thirdPos = 0
        } else {
          if (table[i][columnCollections[0]] === table[i - 1][columnCollections[0]]) {
            firstColArr[firstPos] += 1
            firstColArr.push(0)
          } else {
            firstColArr.push(1)
            firstPos = i
          }
          if (table[i][columnCollections[1]] === table[i - 1][columnCollections[1]]) {
            secondColArr[secondPos] += 1
            secondColArr.push(0)
          } else {
            secondColArr.push(1)
            secondPos = i
          }
          if (table[i][columnCollections[2]] === table[i - 1][columnCollections[2]]) {
            thirdColArr[thirdPos] += 1
            thirdColArr.push(0)
          } else {
            thirdColArr.push(1)
            thirdPos = i
          }
        }
      }
      return [firstColArr, secondColArr, thirdColArr]
    }
  }
}
</script>