<template>
<Table :columns="columns" :data="data" border :span-method="handleSpan"></Table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: "Date",
key: "date",
align: "center",
},
{
title: "Name",
key: "name",
},
{
title: "Age",
key: "age",
},
{
title: "Address",
key: "address",
},
],
data: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03",
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01",
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02",
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04",
},
],
};
},
methods: {
handleSpan({ row, column, rowIndex, columnIndex }) {
if (
rowIndex % 2 === 0 &&
columnIndex === 0 &&
rowIndex !== this.data.length - 2 &&
rowIndex !== this.data.length - 1
) {
return {
rowspan: 2,
colspan: 1,
};
} else if (
rowIndex % 2 !== 0 &&
columnIndex === 0 &&
rowIndex !== this.data.length - 2 &&
rowIndex !== this.data.length - 1
) {
return {
rowspan: 0,
colspan: 0,
};
}
if (rowIndex === this.data.length - 2 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === this.data.length - 2 && columnIndex === 1) {
return [0, 0];
}
if (rowIndex === this.data.length - 1 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === this.data.length - 1 && columnIndex === 1) {
return [0, 0];
}
},
},
};
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3567d2e460d029579909f35cae1927c8.png)
handleSpan({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0 && columnIndex === 0 && rowIndex !== this.tableDatalist.length - 2 && rowIndex !== this.tableDatalist.length - 1) {
return {
rowspan: 2,
colspan: 1,
};
} else if (
rowIndex % 2 !== 0 &&
columnIndex === 0 &&
rowIndex !== this.tableDatalist.length - 2 &&
rowIndex !== this.tableDatalist.length - 1
) {
return {
rowspan: 0,
colspan: 0,
};
}
if (rowIndex === this.tableDatalist.length - 2 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === this.tableDatalist.length - 2 && columnIndex === 1) {
return [0, 0];
}
if (rowIndex === this.tableDatalist.length - 1 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === this.tableDatalist.length - 1 && columnIndex === 1) {
return [0, 0];
}
},