![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1f22664871ff466f5e9e3ba3172e7298.png)
- 第一列中第二行以后的行是需要合并的,el-table 提供了一个 span-method 属性,用于传入合并单元格方法,在里面可以根据 rowspan、colspan 合并行或列
- 第 2、3、4 列需要改变表格 border,需要使用 /deep/ 修改 element 默认的颜色,使用 nth-child、first-child 等找到对应的行或列,修改border
<template>
<div class="table-test">
<el-table
:data="dataList"
border
size="mini"
:span-method="arraySpanMethod"
:header-cell-style="{ background: '#f7f7f7' }"
>
<el-table-column
v-for="item in ['a', 'b', 'c', 'd']"
:key="item"
:prop="item"
:label="item"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
dataList: []
};
},
mounted() {
this.dataList = [1, 2, 3, 4].map(() => {
return { a: "1", b: "2", c: "3", d: 4 };
});
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row, column, rowIndex, columnIndex);
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 1,
colspan: 1
};
} else if (rowIndex === 1) {
return {
rowspan: this.dataList.length - 1,
colspan: 1
};
} else if (rowIndex >= 2) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
<style lang="less" scoped>
.table-test {
width: 500px;
margin: 100px;
/deep/ .el-table th:not(:first-child) {
border-right: 0;
}
/deep/ .el-table td {
border-right: 0;
border-bottom: 0;
}
/deep/ .el-table__row:first-child td {
border-bottom: 1px solid #eaeaea;
}
/deep/ .el-table__row:first-child td:first-child,
/deep/ .el-table__row:nth-child(2) td:first-child {
border-right: 1px solid #eaeaea;
}
}
</style>
-----------------------------