vue，element-ui表格，合並單元格，如果需要合並的數據隔行，需要重新排列數組

摘要：為了自己以后用起來方便，還是記錄一下

 <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="數值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="數值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="數值 3（元）">
      </el-table-column>
    </el-table>

 

 

 export default {
    data() {
      return {
        tableData: [{
          id: '張三',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '李四',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        },{
          id: '張三',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        },{
          id: '李四',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '張三',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '張三',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
orgTypeIndexArr:[]
      };
    },
    created() {
        this.conductData()
    },
    methods: {
        // 數組排序 將相同id的項整合在一起
        conductData() {
            let cache = {};  //存儲的是鍵是id 的值，值是id 在indeces中數組的下標
            let indices = [];  //數組中每一個值是一個數組，數組中的每一個元素是原數組中相同id的下標 (二維數組[[], []])
            this.tableData.map((item,index)=>{
                let id = item.id;
                let idx = cache[id]; //indices中對應的下標
                if (idx!==undefined){ //判斷是否未定義（cache對象中未定義時 如cache['zhangsan'] === 'undefined' 注：此處必須是全等 例：0==undefined）
                    indices[idx].push(index) // 將原數組中id的下標賦給indices對應下標的數組 例：[[0、2、4、5]]id為張三的下標集合
                } else {
                    cache[id] = indices.length //將indices的長度賦給cache[zhangsan或lisi] 
                    indices.push([index]) //記錄下標 此處運行的次數與不同id的個數相等
                }
            })
            console.log(indices) // [[0、2、4、5], [1,3]] 分別對應id為張三、李四的原數組中id下標的集合
            //以下是通過indices中記錄的下標 整合原數組 （簡單就不描述了 嘿嘿！）
            let result = [];
            indices.map((item)=>{
                item.map((index)=>{
                    result.push(this.tableData[index])
                })
            })
            this.tableData = result
        },
      //合並單元格
      getTableData() {
        let spanOneArr = [],
          spanTwoArr = [],
          concatOne = 0,
          concatTwo = 0;
        this.tableData.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1);
            spanTwoArr.push(1);
          } else {
            if (item.id === this.tableData[index - 1].id) {
              //第一列需合並相同內容的判斷條件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            }
          }
        });
        return {
          one: spanOneArr,
          two: spanTwoArr
        };
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.getTableData().one[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },

    }
  };