这几天项目用的合并单元格挺多的,正好看了下案例来整理下:
<template>
<div>
<el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="amount1" sortable label="数值 1">
</el-table-column>
<el-table-column prop="amount2" sortable label="数值 2">
</el-table-column>
<el-table-column prop="amount3" sortable label="数值 3">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
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: "王小虎",
amount1: "324",
amount2: "1.9",
amount3: 9,
},
{
id: "12987125",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "12987126",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
],
};
},
methods: {
arraySpanMethod({ rowIndex, columnIndex }) {
if (rowIndex === 0) {
if (columnIndex === 0) {
return [1, 2]; // 合并, 纵向来看保持不变,横向合并第一列和第二列;
} else if (columnIndex === 1) {
return [0, 0]; // 删除, 删除第一行,第二列数据
} else {
return [1,1] // 正常单元格显示
}
}
},
},
};
</script>