<el-table
    :data="tableData"
    :span-method="(...arg) => strategySpanMethod(...arg, tableData, [2, 3])"
    border
  >
    <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="數(shù)值 1（元）"></el-table-column>
    <el-table-column prop="amount2" label="數(shù)值 2（元）"></el-table-column>
    <el-table-column prop="amount3" label="數(shù)值 3（元）"></el-table-column>
  </el-table>
import { strategySpanMethod } from "./event/tableHeBing";
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987126",
          name: "虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },

        {
          id: "12987125",
          name: "小虎",
          amount1: "324",
          amount2: "4.1",
          amount3: 17,
        },
        {
          id: "12987124",
          name: "小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },

        {
          id: "12987123",
          name: "王小虎",
          amount1: "234",
          amount2: "4.43",
          amount3: 12,
        },
      ],
      strategySpanMethod,
    };
  },
  methods: {},
};



// 處理合并行的數(shù)據(jù)(js文件)
export const getSpanArr = (data, spanKey) => {
  let spanArr = []; //值
  let pos = ""; //下標(biāo)
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判斷當(dāng)前元素與上一個(gè)元素是否相同
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }
  return spanArr;
};
// 當(dāng)前行row议泵、當(dāng)前列column幌氮、當(dāng)前行號(hào)rowIndex片部、當(dāng)前列號(hào)columnIndex
export const strategySpanMethod = (
  { row, column, rowIndex, columnIndex },
  data,
  currindex = [] //要合并的列下標(biāo)數(shù)
) => {
  // columnIndex判斷第一列或第二列合并 列數(shù)從0開始
  if (currindex.indexOf(columnIndex) != -1) {
    let spanArr = getSpanArr(data, column.property);
    const _row = spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
  // if (columnIndex == 1 || columnIndex == 2) {
  //   // column.property是表頭的key
  //   let spanArr = this.getSpanArr(data, column.property);
  //   const _row = spanArr[rowIndex];
  //   const _col = _row > 0 ? 1 : 0;
  //   return {
  //     rowspan: _row,
  //     colspan: _col,
  //   };
  // }
};
//原創(chuàng)地址:https://blog.csdn.net/qq_37916164/article/details/125151467