[JavaScript知识库]el-table 合并单元格

<el-table :data="tableData" :span-method="objectSpanMethod" border>
            <el-table-column
              prop="large_name"
              label="大类名称"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="large_code" label="大类编码" align="center">
            </el-table-column>
            <el-table-column prop="amount" label="大类预算汇总" align="center">
            </el-table-column>
            <el-table-column prop="middle_name" label="中类名称">
            </el-table-column>
            <el-table-column prop="middle_code" label="中类编码">
            </el-table-column>
            <el-table-column prop="budget" label="预算">
              <template slot-scope="{ row }">
                <el-input v-model="row.budget"></el-input>
              </template> </el-table-column
            >>
          </el-table>

{
	 data() {
    return {
      tableData: [
        {
          large_name: "电脑1",
          large_code: "D001",
          middle_name: "笔记本电脑1-1",
          middle_code: "D001-M001",
          amount: 100,
          budget: 30,
        },
        {
          large_name: "电脑1",
          large_code: "D001",
          middle_name: "笔记本电脑1-2",
          middle_code: "D001-M002",
          amount: 100,
          budget: 30,
        },
        {
          large_name: "电脑2",
          large_code: "D002",
          middle_name: "笔记本电脑2-1",
          middle_code: "D002-M001",
          amount: 100,
          budget: 30,
        },
        {
          large_name: "电脑2",
          large_code: "D002",
          middle_name: "笔记本电脑2-2",
          middle_code: "D002-M002",
          amount: 100,
          budget: 30,
        },
        {
          large_name: "电脑3",
          large_code: "D003",
          middle_name: "笔记本电脑3-1",
          middle_code: "D003-M001",
          amount: 100,
          budget: 30,
        },
      ],
      // 每一行记录的合并数
      spanArr: [],
    };
  },
  mounted() {
    this.getSpanArr(this.tableData);
  },
  methods: {
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data) {
      this.spanArr = [];
      if (data == null) {
        return;
      }
      let pos = 0;
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          pos = 0;
        } else {
          if (data[i].large_name === data[i - 1].large_name) {
            this.spanArr[pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            pos = i;
          }
        }
      }
    },
}
}