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.
87 lines
2.5 KiB
87 lines
2.5 KiB
<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>
|
|
|