You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.5 KiB
88 lines
2.5 KiB
1 year ago
|
<template>
|
||
|
|
<el-table :data="tableData" :span-method="arraySpanMethod" border>
|
||
|
|
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="name" label="Name"></el-table-column>
|
||
|
|
<el-table-column prop="amount1" sortable label="Amount1"></el-table-column>
|
||
|
|
<el-table-column prop="amount2" sortable label="Amount2"></el-table-column>
|
||
|
|
<el-table-column prop="amount3" sortable label="Amount3"></el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<br>
|
||
|
|
<el-table :data="tableData" :span-method="objectSpanMethod" border>
|
||
|
|
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="name" label="Name"></el-table-column>
|
||
|
|
<el-table-column prop="amount1" sortable label="Amount1"></el-table-column>
|
||
|
|
<el-table-column prop="amount2" sortable label="Amount2"></el-table-column>
|
||
|
|
<el-table-column prop="amount3" sortable label="Amount3"></el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "Table_Demo8",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData: [
|
||
|
|
{
|
||
|
|
id: '12987122',
|
||
|
|
name: 'Tom',
|
||
|
|
amount1: '234',
|
||
|
|
amount2: '3.2',
|
||
|
|
amount3: 10,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '12987123',
|
||
|
|
name: 'Tom',
|
||
|
|
amount1: '165',
|
||
|
|
amount2: '4.43',
|
||
|
|
amount3: 12,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '12987124',
|
||
|
|
name: 'Tom',
|
||
|
|
amount1: '324',
|
||
|
|
amount2: '1.9',
|
||
|
|
amount3: 9,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '12987125',
|
||
|
|
name: 'Tom',
|
||
|
|
amount1: '621',
|
||
|
|
amount2: '2.2',
|
||
|
|
amount3: 17,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '12987126',
|
||
|
|
name: 'Tom',
|
||
|
|
amount1: '539',
|
||
|
|
amount2: '4.1',
|
||
|
|
amount3: 15,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
arraySpanMethod({row, column, rowIndex, columnIndex}) {
|
||
|
|
if (rowIndex % 2 === 0) {
|
||
|
|
if (columnIndex === 0) {
|
||
|
|
return [1, 2] // columnIndex === 0 表示第一列，[1, 2] 1代表行不合并，2代表列占用2列
|
||
|
|
} else if (columnIndex === 1) {
|
||
|
|
return [0, 0] // 由于第一列占用了两列，所以第二列的内容需要设置为[0,0]就不会占空间了
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
objectSpanMethod({row, column, rowIndex, columnIndex}) {
|
||
|
|
if (columnIndex === 0) {
|
||
|
|
if (rowIndex % 2 === 0) {
|
||
|
|
return [2, 1]
|
||
|
|
} else if (rowIndex % 2 === 1) {
|
||
|
|
return [0, 0]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|