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:
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/[email protected]/lib/theme-chalk/index.css");<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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>