1.页面的布局 注意 序号的propindextemplate div classtable el-table :datatableData :span-methodobjectSpanMethod border stylewidth: 100% //注意 在序号这一列添加一个prop属性propindex //注意 在序号这一列添加一个prop属性:indexindexMethods el-table-column propindex typeindex label序号 :indexindexMethods/el-table-column el-table-column proptime label时间/el-table-column el-table-column propgrade label年级/el-table-column el-table-column propname label姓名/el-table-column el-table-column propsubjects label科目/el-table-column el-table-column propscore label成绩/el-table-column /el-table /div /template2.span-method是el-table上属性其值是一个函数objectSpanMethod方法是用来处理合并行的返回值data数据如下:tableData: [{ time: 2020-08-10, grade: 三年二班, name: 小明, subjects: 语文, score: 80, },{ time: 2020-08-10, grade: 三年二班, name: 小明, subjects: 数学, score: 80, },],mergeObj: {}, // 用来记录需要合并行的下标//注意mergeArr增加合并列属性indexmergeArr: [index,time, grade, name, subjects, score], // 需要合并的表格中的列名indexObj: {},// 用于记录索引项对应的实际序号3.在接口返回后调用方法如下this.getSpanArr(this.tableData);4.getSpanArr方法// getSpanArr方法 getSpanArr(data) { this.mergeArr.forEach((key, index1) { let count 0; // 用来记录需要合并行的起始位置 this.mergeObj[key] []; // 记录每一列的合并信息 data.forEach((item, index) { // index 0表示数据为第一行直接 push 一个 1 if (index 0) { this.mergeObj[key].push(1); } else { // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 1 表示当前行需要合并 并push 一个 0 作为占位 if (item[key] data[index - 1][key]) { this.mergeObj[key][count] 1; this.mergeObj[key].push(0); } else { // 如果当前行和上一行其值不相等 count index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1 } } }); }); // 等待mergeObj处理完序号列这一项合并情况只需要和相邻的下一项time合并情况一致即可 this.mergeObj[index] this.mergeObj[time]; // 处理合并后序号匹配不上的问题 处理indexObj let num 0; this.mergeObj[index].forEach((item, index) { if (item ! 0) { num; this.indexObj[index] num; } }); },5. 自定义序号// 自定义序号 indexMethods(index) { return this.indexObj[index] this.page.siez * (this.page.current- 1); },6.数据处理好之后就可以调用objectSpanMethod方法了如下// objectSpanMethod方法 // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 } objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 判断列的属性 if (this.mergeArr.indexOf(column.property) ! -1) { // 判断其值是不是为0 if (this.mergeObj[column.property][rowIndex]) { return [this.mergeObj[column.property][rowIndex], 1]; } else { // 如果为0则为需要合并的行 return [0, 0]; } } },
el-table合并单元格并排列序号
1.页面的布局 注意 序号的propindextemplate div classtable el-table :datatableData :span-methodobjectSpanMethod border stylewidth: 100% //注意 在序号这一列添加一个prop属性propindex //注意 在序号这一列添加一个prop属性:indexindexMethods el-table-column propindex typeindex label序号 :indexindexMethods/el-table-column el-table-column proptime label时间/el-table-column el-table-column propgrade label年级/el-table-column el-table-column propname label姓名/el-table-column el-table-column propsubjects label科目/el-table-column el-table-column propscore label成绩/el-table-column /el-table /div /template2.span-method是el-table上属性其值是一个函数objectSpanMethod方法是用来处理合并行的返回值data数据如下:tableData: [{ time: 2020-08-10, grade: 三年二班, name: 小明, subjects: 语文, score: 80, },{ time: 2020-08-10, grade: 三年二班, name: 小明, subjects: 数学, score: 80, },],mergeObj: {}, // 用来记录需要合并行的下标//注意mergeArr增加合并列属性indexmergeArr: [index,time, grade, name, subjects, score], // 需要合并的表格中的列名indexObj: {},// 用于记录索引项对应的实际序号3.在接口返回后调用方法如下this.getSpanArr(this.tableData);4.getSpanArr方法// getSpanArr方法 getSpanArr(data) { this.mergeArr.forEach((key, index1) { let count 0; // 用来记录需要合并行的起始位置 this.mergeObj[key] []; // 记录每一列的合并信息 data.forEach((item, index) { // index 0表示数据为第一行直接 push 一个 1 if (index 0) { this.mergeObj[key].push(1); } else { // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 1 表示当前行需要合并 并push 一个 0 作为占位 if (item[key] data[index - 1][key]) { this.mergeObj[key][count] 1; this.mergeObj[key].push(0); } else { // 如果当前行和上一行其值不相等 count index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1 } } }); }); // 等待mergeObj处理完序号列这一项合并情况只需要和相邻的下一项time合并情况一致即可 this.mergeObj[index] this.mergeObj[time]; // 处理合并后序号匹配不上的问题 处理indexObj let num 0; this.mergeObj[index].forEach((item, index) { if (item ! 0) { num; this.indexObj[index] num; } }); },5. 自定义序号// 自定义序号 indexMethods(index) { return this.indexObj[index] this.page.siez * (this.page.current- 1); },6.数据处理好之后就可以调用objectSpanMethod方法了如下// objectSpanMethod方法 // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 } objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 判断列的属性 if (this.mergeArr.indexOf(column.property) ! -1) { // 判断其值是不是为0 if (this.mergeObj[column.property][rowIndex]) { return [this.mergeObj[column.property][rowIndex], 1]; } else { // 如果为0则为需要合并的行 return [0, 0]; } } },
