Vue Element ui table 合併單元格

使用span-method 進行合併

如果 是首次出現的內容就計算具體有多少行是一樣的 然後返回rows行數作爲rowspan

如果是與上一行內容相同 就返回0 0消除該單元格

返回rowspan和colspan的對象 意味着合併的行數和列

如果 不參與合併就返回0 0 以免出現多出行或列而導致錯位的情況發生

<el-table
                :data="tableData"
                border
                :span-method="objectSpanMethod"
                style="width: 100%">
                <el-table-column
                prop="order"
                label="序號"
                align="center"
                width="50">
                </el-table-column>
                <el-table-column
                prop="name"
                :label="'名稱'"
                align="center"
                fixed="left"
                width="70">
                </el-table-column>
</el-table>



<script>
export default {
  name: 'StationsStaTable',
  data () {
    return {
        tableData: [],
    },
 methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 對第一列 第二列 進行合併
        if (columnIndex === 1 || columnIndex === 0) {
            // 當 當前行與上一行內容相同時 返回0 0 意味消除
            if(rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]){
                return {
                    rowspan: 0,
                    colspan: 0
                };
            }else{
                let rows = 1;
                // 反之 查詢相同的內容有多少行 進行合併
                for(let i = rowIndex; i < this.tableData.length - 1; i++){
                    if (row[column.property] === this.tableData[i + 1][column.property]) {
                        rows++;
                    }
                }
                // 返回相同內容的行數
                return {
                    rowspan: rows,
                    colspan: 1
                };
            }
        }
      }
 }