element-ui table :span-method（行合并）

參考：https://blog.csdn.net/qq_29468573/article/details/80742646        

element-ui官網中關于行合并的例子是根據行号進行合并的，這顯然不符合我們日常開發需求，因為通常我們table中的資料都是動态生成的，是以需要做一些修改。我們首先解讀一下官網執行個體中的各參數的意義：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于設定要合并的列
          if (rowIndex % 2 === 0) {   //用于設定合并開始的行号
            return {
              rowspan: 2,　　　　　//合并的行數
              colspan: 1          //合并的列數，設為０則直接不顯示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
           

研究這個例子後不難發現，實作合并行的方法其實在每一行資料渲染的時候都會執行，隻不過在渲染過程中我們設定了它合并的行數和列數，以得到不同的效果。是以我們需要生成一個與行數相同的數組記錄每一行設定的合并數。處理過程如下：

getSpanArr(data) {　
  for (var i = 0; i < data.length; i++) {
        if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
        } else {
          // 判斷目前元素與上一個元素是否相同
    if (data[i].name === data[i - 1].name) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
        }
    }
},
           

data就是我們從背景拿到的資料，通常是一個數組；spanArr是一個空的數組，用于存放每一行記錄的合并數；pos是spanArr的索引。上述代碼意思是：如果是第一條記錄（索引為０），向數組中加入１，并設定索引位置；如果不是第一條記錄，則判斷它與前一條記錄是否相等，如果相等，則向spanArr中添入元素０，并将前一位元素＋１，表示合并行數＋１，以此往複，得到所有行的合并數，０即表示該行不顯示。

cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
},
           

然後根據得到的數組spanArr對表格進行合并渲染，并綁定合并方法

<el-table
      border
      :data="tableData"
      style="width: 100%;max-height: 160px;overflow: auto"
      :span-method="cellMerge">
    ......
</el-table>
           

注：背景擷取資料的時候根據要在前台進行合并的字段進行排序，使要合并的字段值相同的記錄依次相鄰。

完整示例：

<el-table
      :data="tableData"
      :span-method="cellMerge"
      border
      style="width: 60%;">
      <el-table-column
        prop="id"
        label="商戶ID">
      </el-table-column>
      <el-table-column
          prop="m_name"
          label="商戶名稱">
      </el-table-column>
      <el-table-column
        prop="name"
        label="産品名稱">
      </el-table-column>
      <el-table-column
        prop="price"
        label="産品價格">
      </el-table-column>
    </el-table>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          id: '1',
          m_name: '白商戶',
          name: '白1',
          price: '100'
        }, {
          id: '1',
          m_name: '白商戶',
          name: '白2',
          price: '101'
        }, {
          id: '1',
          m_name: '白商戶',
          name: '白3',
          price: '102'
        }, {
          id: '2',
          m_name: '黑商戶',
          name: '黑1',
          price: '200'
        }, {
          id: '2',
          m_name: '黑商戶',
          name: '黑2',
          price: '201'
        },{
          id: '3',
          m_name: '黃商戶',
          name: '黃1',
          price: '30'
        }],
        spanArr: [],
        pos: '',
      }
    },
    created(){
      this.getSpanArr(this.tableData)
    },
    methods: {
      //需要生成一個與行數相同的數組記錄每一行設定的合并數
      getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判斷目前元素與上一個元素是否相同
            if (data[i].id === data[i - 1].id) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },
      cellMerge({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  })
</script>