element-uitable表格合并
效果如下：
需求分析：项⽬中有个表格需要进⾏合并，并且知道是15⾏，⾏数固定，1-6⾏第⼀列和第⼆列进⾏合并，7-15⾏第⼀列进⾏合并；第7⾏第⼆列不需要合并，第8、9⾏第⼆列进⾏合并，第10,11,12⾏第⼆列进⾏合并，第13,14,15⾏第⼆列需要合并
最终代码：
<template>
<basic-container>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
>
<el-table-column prop="id" label=" " width="180"></el-table-column>
<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">
</div>
</basic-container>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "12987122",
id: "12987122",
name: "王⼩虎1", amount1: "234", amount2: "3.2", amount3: 10,
},
{
id: "12987123",
id: "12987123",
name: "王⼩虎2", amount1: "165", amount2: "4.43", amount3: 12,
},
{
id: "12987124",
id: "12987124",
name: "王⼩虎3", amount1: "324", amount2: "1.9", amount3: 9,
},
{
id: "12987125",
id: "12987125",
name: "王⼩虎4", amount1: "621", amount2: "2.2", amount3: 17,
},
{
id: "12987126",
id: "12987126",
name: "王⼩虎5", amount1: "539", amount2: "4.1", amount3: 15,
},
{
id: "12987110",
id: "12987110",
name: "王⼩虎6", amount1: "539", amount2: "4.1", amount3: 15,
},
{
id: "12987111",
id: "12987111",
name: "王⼩虎7", amount1: "539", amount2: "4.1", amount3: 15,
},
{
id: "12987112",
id: "12987112",
name: "王⼩虎8", amount1: "539", amount2: "4.1", amount3: 15,
},
{
id: "12987113",
id: "12987113",
name: "王⼩虎9", amount1: "539", amount2: "4.1", amount3: 15,
},
{
id: "12987114",
id: "12987114",
name: "王⼩虎10", amount1: "539",
id: "12987115",
id: "12987115",
name: "王⼩虎11",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987116",
id: "12987116",
name: "王⼩虎12",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987117",
id: "12987117",
name: "王⼩虎13",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987118",
id: "12987118",
name: "王⼩虎14",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987119",
id: "12987119",
name: "王⼩虎15",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
],
};
},
methods: {
/**
* 需求
* 1、表格总⾏数15⾏是固定的，需要对某些⾏列进⾏合并
* 2、1-6⾏第⼀列和第⼆列进⾏合并
* 3、7-15⾏第⼀列进⾏合并
* 4、7⾏第⼆列不需要合并
* 5、第8、9⾏第⼆列进⾏合并
* 6、第10,11,12⾏第⼆列进⾏合并
* 7、第13,14,15⾏第⼆列需要合并
*/
//element-ui 提供表格合并的⽅法
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // console.log({ row, column, rowIndex, columnIndex }, "---obj");
// row --- 当前⾏
// column ----当前列
// rowIndex --当前⾏号
// columnIndex --当前列号
//第⼀步对第⼀列第1-6⾏数据进⾏操作
if (columnIndex === 0) {
if (rowIndex < 6) {
// 如果⾏数是⼩于6⾏的
return [1, 2]; //实现第⼀列和第⼆列进⾏合并
} //因为改变了单元格的样式，所以需要对改变的单元格样式进⾏处理 } else if (columnIndex === 1 && rowIndex < 6) {
//第⼆列单元格1-6⾏受影响了，需要处理
return [0, 0];
}
//第⼆步对第⼀列第6⾏以外的数据进⾏处理
if (columnIndex === 0 && rowIndex >= 6) {
// 下标是从0开始的，所以第七⾏是6
if (columnIndex === 0 && rowIndex === 6) {
// 对第⼀列第7-15⾏进⾏合并
return {
rowspan: 9,
colspan: 1,
};
} else {
//因为7-15⾏单元格的样式改变了，会影响其他⾏的，需要处理
return {
}
//第三步对第⼆列第7-15⾏的数据进⾏处理
if (columnIndex === 1 && rowIndex > 6) {
if (columnIndex === 1 && rowIndex === 7) {
//对第⼆列第8-9⾏进⾏合并
return {
rowspan: 2,
colspan: 1,
};
} else {
columnspan是什么意思/
/对受影响的单元格样式进⾏处理
if (columnIndex === 1 && rowIndex === 8) {
return {
rowspan: 0,
colspan: 0,
};
}
}
//第四步对第⼆列第10-12⾏进⾏合并
if (columnIndex === 1 && rowIndex === 9) {
return {
rowspan: 3,
colspan: 1,
};
} else {
//对受影响的单元格样式进⾏处理
if ((columnIndex === 1 && rowIndex === 10) || rowIndex === 11) {
return {
rowspan: 0,
colspan: 0,
};
}
}
//第五步对第⼆列第13-15⾏进⾏合并
if (columnIndex === 1 && rowIndex === 12) {
return {
rowspan: 3,
colspan: 1,
};
} else {
//对受影响的单元格样式进⾏处理
if ((columnIndex === 1 && rowIndex === 13) || rowIndex === 14) {
return {
rowspan: 0,
colspan: 0,
};
}
}
}
},
},
};
</script>
<style lang="scss">
div {
text-align: center; //对单元格居中对齐
}
.has-gutter tr th:first-child {
border-right: none; //去除第⼀个id的右边线条
}
.has-gutter tr th:nth-child(2) {
.cell {
text-align: left; //对第⼆个id的
padding-left: 0;
margin-left: 0;
}
}
</style>
发表评论