Vue.js Element UI el-table: How to merge cells and subtotal them

Question

I got an original table like this

| category | name  | price  | count | subtotal |   
|----------|-------|--------|-------|----------| 
| fruit    | apple |   2    |   10  |    20    | 
|----------|-------|--------|-------|----------| 
| fruit    | apple |   3    |   20  |    60    | 
|----------|-------|--------|-------|----------| 
|  meat    | pork  |   4    |   10  |    40    | 
|----------|-------|--------|-------|----------| 
|  meat    | beef  |   5    |   20  |    50    |

and I try a method to merge the cells with same category, name, now it becomes:

| category | name  | price  | count | subtotal |   
|----------|-------|--------|-------|----------| 
|          |       |   2    |   10  |    20    | 
|  fruit   | apple |--------|-------|----------| 
|          |       |   3    |   20  |    60    | 
|----------|-------|--------|-------|----------| 
|          |       |   4    |   10  |    40    | 
|   meat   | pork  |--------|-------|----------| 
|          |       |   5    |   20  |    50    |

but in the above table the beef cell disappeared, What I expect is:

| category | name  | price  | count | subtotal |   
|----------|-------|--------|-------|----------| 
|          |       |   2    |   10  |    20    | 
|  fruit   | apple |--------|-------|----------| 
|          |       |   3    |   20  |    60    | 
|----------|-------|--------|-------|----------| 
|          | pork  |   4    |   10  |    40    | 
|   meat   |-------|--------|-------|----------| 
|          | beef  |   5    |   20  |    50    |

And also I want to calculate the subtotal of the same items, like the following:

| category | name  | price  | count | subtotal | subtotal2 |    
|----------|-------|--------|-------|----------|-----------| 
|          |       |   2    |   10  |    20    |           | 
|  fruit   | apple |--------|-------|----------|     80    |
|          |       |   3    |   20  |    60    |           |  
|----------|-------|--------|-------|----------|-----------|  
|          | pork  |   4    |   10  |    40    |           |  
|   meat   |-------|--------|-------|----------|     90    |
|          | beef  |   5    |   20  |    50    |           |

note:

I can merge the subtotal2 cell by adding columnIndex === 5 to the objectSpanMethod but the number isn't what I want: (now in subtotal2 it only shows the subtotal of the first row of each item, but I want the sum of the subtotals)

| category | name  | price  | count | subtotal | subtotal2 |    
|----------|-------|--------|-------|----------|-----------| 
|          |       |   2    |   10  |    20    |           | 
|  fruit   | apple |--------|-------|----------|     20    |
|          |       |   3    |   20  |    60    |           |  
|----------|-------|--------|-------|----------|-----------|  
|          | pork  |   4    |   10  |    40    |           |  
|   meat   |-------|--------|-------|----------|     40    |
|          | beef  |   5    |   20  |    50    |           |

Here's my code:

HTML

<div id="app">
<template>
    </el-table>
      <h1>DataTable<h1>
    <el-table
      :data="dataTable"
      :span-method="objectSpanMethod"
      style="width: 100%">
      <el-table-column
        prop="category"
        label="category"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="name"
        width="180">
      </el-table-column>
       <el-table-column
        prop="price"
        label="price"
        width="180">
      </el-table-column>
      <el-table-column
        prop="count"
        label="count"
        width="180">
      </el-table-column>
       <el-table-column
        label="subtotal"
        align="center"
        prop="subtotal"
        width="180">
       <template slot-scope="scope"> {{scope.row.subtotal=scope.row.price*scope.row.count}}
      </template>
      </el-table-column>
    </el-table>
  </template>
</div>

JS

      data() {
        return {
          dataTable: [{
            category: 'fruit',
            name: 'apple',
            price: 2,
            count: 10,
            subtotal:1
          },{
            category: 'fruit',
            name: 'apple',
            price: 3,
            count: 20,
            subtotal:1
          },{
            category: 'meat',
            name: 'pork',
            price: 4,
            count: 10,
            subtotal:1
          },{
            category: 'meat',
            name: 'beef',
            price: 5,
            count: 10,
            subtotal:1
          }],
           spanArr: [],
        }
      },
 
  methods:{
      onMergeLines() {
      this.dataTable.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.dataTable[index].category ===
            this.dataTable[index - 1].category
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column);
      if (columnIndex === 0 || columnIndex === 1 ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
    },
  mounted() {
    this.onMergeLines();
  },
  }

Also CodePen:https://codepen.io/itayueat/pen/qBPrYdV

Please let me know if you got have any idea to make this table, thank you!

Ming丶 · Accepted Answer · 2021-12-17T09:38:07.823

My code is bloated, you can basically achieve the function you want. You can simplify it a bit more if you need to.

var Main = {
  data() {
    return {
      dataTable: [
        {
          date: "11.26",
          category: "fruit",
          name: "apple",
          price: 2,
          count: 10,
          subtotal: 1
        },
        {
          date: "11.26",
          category: "fruit",
          name: "apple",
          price: 3,
          count: 20,
          subtotal: 1
        },
        {
          date: "11.26",
          category: "meat",
          name: "pork",
          price: 4,
          count: 10,
          subtotal: 1
        },
        {
          date: "11.26",
          category: "meat",
          name: "beef",
          price: 5,
          count: 10,
          subtotal: 1
        },
        {
          date: "11.26",
          category: "car",
          name: "motorcycle",
          price: 3,
          count: 20,
          subtotal: 1
        },
        {
          date: "11.27",
          category: "car",
          name: "motorcycle",
          price: 3,
          count: 20,
          subtotal: 1
        },
        {
          date: "11.27",
          category: "car",
          name: "motorcycle",
          price: 3,
          count: 20,
          subtotal: 1
        }
      ]
    };
  },
  created() {
    this.onMergeLines();
  },
  methods: {
    // Processing data calculation
    onMergeLines() {
      const propertys = ["date", "category", "name"];
      const dataTable = this.dataTable;
      this.dataTable = dataTable.map((item, index) => {
        preRow = this.dataTable[index - 1] || {};
        item.subtotal = item.count * item.price || 0;
        item = diffProperty(item, index, 0);
        return item;
      });

      function diffProperty(current, index, keyIndex) {
        const key = propertys[keyIndex],
          preRow = dataTable[index - 1] || {};
        if (current[key] === preRow[key]) {
          if (keyIndex < propertys.length) {
            return diffProperty(current, index, keyIndex + 1);
          } else {
            current.subtotal2 = preRow.subtotal2;
            return current;
          }
        } else {
          let subtotal2 = current.count * current.price || 0;
          for (let i = index + 1; i < dataTable.length; i++) {
            const nextRow = dataTable[i];
            console.log(
              propertys.filter((prop) => current[prop] === nextRow[prop])
                ?.length || 0,
              "c"
            );
            if (
              (propertys.filter((prop) => current[prop] === nextRow[prop])
                ?.length || 0) === propertys.length
            ) {
              subtotal2 += nextRow["count"] * nextRow["price"] || 0;
            } else {
              break;
            }
          }
          current.subtotal2 = subtotal2;
          return current;
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //The index of the column we want to merge
      if (![0, 1, 2, 6].includes(columnIndex)) {
        return {
          rowspan: 1,
          colspan: 1
        };
      }

      const dataTable = this.dataTable,
        property = column["property"];
      const tableLen = dataTable.length;
      let _row = 1,
        _col = 1;
      const preRow = dataTable[rowIndex - 1] || {};

      if (
        row.date === preRow.date &&
        (property === "date" || preRow[property] === row[property])
      ) {
        _row = 0;
      } else if (rowIndex + 1 < tableLen) {
        for (let i = rowIndex + 1; i < tableLen; i++) {
          const nextRow = dataTable[i];
          if (
            nextRow.date === row.date &&
            (property === "date" ||
              (nextRow.category === row.category &&
                row[property] === nextRow[property]))
          ) {
            _row++;
          } else {
            break;
          }
        }
      }

      return {
        rowspan: _row,
        colspan: _col
      };
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
  <template>

    </el-table>
    <h1>DataTable<h1>
        <el-table border :data="dataTable" :span-method="objectSpanMethod" style="width: 100%">
          <el-table-column prop="date" label="date" width="180">
          </el-table-column>
          <el-table-column prop="category" label="category" width="180">
          </el-table-column>
          <el-table-column prop="name" label="name" width="180">
          </el-table-column>
          <el-table-column prop="price" label="price" width="180">
          </el-table-column>
          <el-table-column prop="count" label="count" width="180">
          </el-table-column>
          <el-table-column label="subtotal" align="center" prop="subtotal" width="180">
          </el-table-column>
          <el-table-column label="subtotal2" align="center" prop="subtotal2" width="180">
          </el-table-column>
        </el-table>
  </template>
</div>

Please add some explanation to your answer such that others can learn from it — Nico Haase, Dec 16 '21 at 09:20
Hi thank you so much for your kind answer, and can I ask what should I do if I want to add one more column named "Date" in front of the category column? (now the data contains {date, category, name, price, count, subtotal}) I guess maybe it's to add another if loop into the onMergeLines? I'm not sure what to do with the else section and still reading your code. — new, Dec 16 '21 at 09:51
I want to group by date first, then by category, and then by name to count how much does each item cost on each day. I make a picture of the table : https://i.stack.imgur.com/RGRTV.png — new, Dec 17 '21 at 02:15
I've updated the code. Take a look....I also wrote some notes — Ming丶, Dec 17 '21 at 08:07
Thank you for the update answer! but the date column don't fully merge together now (I hope cells with same date merge together) , I thought that index 0 is already in the objectSpanMethod, what else should I do ? — new, Dec 17 '21 at 09:00
ok... I rewrote this method that name called objectSpanMethod — Ming丶, Dec 17 '21 at 09:40
Thanks the result is perfect! I would try to learn your code. Hope you have a nice weekend :-) — new, Dec 17 '21 at 10:09

Vue.js Element UI el-table: How to merge cells and subtotal them

1 Answers1