<template>
<div class="app-container">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="name"
label="姓名"/>
<el-table-column
prop="amount1"
label="数值 1（元）"/>
<el-table-column
prop="amount2"
label="数值 2（元）"/>
<el-table-column
prop="amount3"
label="数值 3（元）"/>
</el-table>
</div>
</template>
<script>
export default {
name: 'StockIndex',
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎1',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎2',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎2',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const that = this
let spanArr = []
let spanScendArr = []
let pos = 0
const data = this.tableData
data.forEach((item, index) => {
if (index === 0) {
spanArr.push(1)
spanScendArr.push(1)
pos = 0
} else {
if (data[index].name === data[index - 1].name) {
spanArr[this.pos] += 1
spanArr.push(0)
} else {
spanArr.push(1)
spanScendArr.push(1)
pos = index
}
}
})
if (columnIndex === 0) {
const _row = spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
} else {
return false
}
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
background-color: #fff;
}
</style>
