elementui のテーブル table は ID に従って列をマージします
写真のように
コードは以下のように表示されます
<el-table :data="tableData" :span-method="objectSpanMethod" border
style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="A" width="180">
</el-table-column>
<el-table-column prop="name" label="B">
</el-table-column>
<el-table-column prop="amount1" label="C">
</el-table-column>
<el-table-column prop="amount2" label="D">
</el-table-column>
<el-table-column prop="amount3" label="E">
</el-table-column>
<el-table-column prop="amount3" label="F">
</el-table-column>
<el-table-column prop="amount3" label="G">
</el-table-column>
<el-table-column prop="amount3" label="H">
</el-table-column>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
last: -1,
cnt: 1,
message: '',
tableData: [{
id: '3',
name: '王小虎2',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '3',
name: '王小虎2',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '3',
name: '王小虎2',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '8',
name: '王小虎1',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '9',
name: '王小虎1',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
},
methods: {
mergeComon(id, rowIndex) {
// 合并单元格
let idName = this.tableData[rowIndex][id]
if (rowIndex > 0) {
// eslint-disable-next-line eqeqeq
if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) {
let i = rowIndex;
let num = 0
while (i < this.tableData.length) {
if (this.tableData[i][id] === idName) {
i++
num++
} else {
i = this.tableData.length
}
}
return {
rowspan: num,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 1
}
}
} else {
let i = rowIndex;
let num = 0
while (i < this.tableData.length) {
if (this.tableData[i][id] === idName) {
i++
num++
} else {
i = this.tableData.length
}
}
return {
rowspan: num,
colspan: 1
}
}
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
return this.mergeComon('id', rowIndex)
}
}
}
})
</script>