表格合并效果图
<template>
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column
v-for='item in tableprop' :key='item.prop'
:prop="item.prop" :label="item.label">
</el-table-column>
</el-table>
</template>
<script>
export default{
data() {
return {
num: 2,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableprop: [{
label: '日期',
prop: 'date'
}, {
label: '姓名',
prop: 'name'
}, {
label: '地址',
prop: 'address'
}]
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) { // 选择合并哪一列
if (rowIndex % this.num === 0) { // 合并多少行
return {
rowspan: this.num, // 要合并的行数
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
</script>