element-ui table 表格合并
效果如下：
需求分析：项目中有个表格需要进行合并，并且知道是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 style="width: 60%;" > <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"> </el-table-column> <el-table-column prop="amount3" sortable label="数值 3"> </el-table-column> </el-table> </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", amount2: "4.1", amount3: 15, }, { 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 { rowspan: 0, colspan: 0, }; } } //第三步 对第二列第7-15行的数据进行处理 if (columnIndex === 1 && rowIndex > 6) { if (columnIndex === 1 && rowIndex === 7) { //对第二列第8-9行进行合并 return { rowspan: 2, colspan: 1, }; } else { //对受影响的单元格样式进行处理 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>
