element ui中的table表格数据是动态生成的，如果说后台要求我们对单元格进行合并，这个时候需要借助一个api,:span-method="arraySpanMethod",arraySpanMethod为我们自己编写的合并单元格的方法。
下图是我在项目中合并的单元格
数据都是从那后拿到的，话不多说直接上代码教大家
1.先在data中定义数据，合并几列就定义几个数组和索引
spanArr: [], //合并医院pos: 0, //合并医院索引dateArr: [], //合并日期dateIndex: 0, //合并日期索引deptArr: [], //合并送检科室deptIndex: 0, //合并送检科室索引cateArr: [], //合并项目分类cateIndex: 0, //合并项目分类索引patientArr: [], //合并患者类别patientIndex: 0, //合并患者类别索引
2.接下来定义合并的函数，并编写代码
merge方法中的data是你table的数据源，我这里的逻辑是以第一行为基准一层层对比
// 初始化合并行数组mergeInit() {this.spanArr = []; //合并医院this.pos = 0; //合并医院索引this.dateArr = []; //合并日期this.dateIndex = 0; //合并日期索引this.deptArr = []; //合并送检科室this.deptIndex = 0; //合并送检科室索引this.cateArr = []; //合并项目分类this.cateIndex = 0; //合并项目分类索引this.patientArr = []; //合并患者类别this.patientIndex = 0; //合并患者类别索引}, // 合并表格merge(data) {this.mergeInit();if (data.length > 0) {for (var i = 0; i < data.length; i++) {if (i === 0) {//第一行必须存在，以第一行为基准this.spanArr.push(1); //合并医院this.pos = 0;this.dateArr.push(1); //合并日期this.dateIndex = 0;this.deptArr.push(1); //合并送检科室this.deptIndex = 0;this.cateArr.push(1); //合并项目分类this.cateIndex = 0;this.patientArr.push(1); //合并患者类别this.patientIndex = 0;} else {// 判断当前元素与上一元素是否相同// 合并医院列if (data[i].request_org_name == data[i - 1].request_org_name) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}// 合并日期列if (data[i].date == data[i - 1].date &&data[i].request_org_name == data[i - 1].request_org_name) {this.dateArr[this.dateIndex] += 1;this.dateArr.push(0);} else {this.dateArr.push(1);this.dateIndex = i;}// 合并送检科室列if (data[i].request_dept_name == data[i - 1].request_dept_name &&data[i].date == data[i - 1].date) {this.deptArr[this.deptIndex] += 1;this.deptArr.push(0);} else {this.deptArr.push(1);this.deptIndex = i;}// 合并患者类别if (data[i].patient_class == data[i - 1].patient_class &&data[i].request_dept_name == data[i - 1].request_dept_name) {this.patientArr[this.patientIndex] += 1;this.patientArr.push(0);} else {this.patientArr.push(1);this.patientIndex = i;}// 合并项目分类if (data[i].exam_item_category == data[i - 1].exam_item_category &&data[i].patient_class == data[i - 1].patient_class && data[i].request_dept_name == data[i - 1].request_dept_name) {this.cateArr[this.cateIndex] += 1;this.cateArr.push(0);} else {this.cateArr.push(1);this.cateIndex = i;}}}}},
最后进行单元格的合并啦
// 合并单元格arraySpanMethod({ row, column, rowIndex, columnIndex }) {const len = this.tableData.length;const t=this.columns.lengthif (columnIndex === 0) {//第一列 医院const _row_1 = this.spanArr[rowIndex];const _col_1 = _row_1 > 0 ? 1 : 0;return {rowspan: _row_1,colspan: _col_1,};} else if (columnIndex === 1) {// 第二列 日期const _row_2 = this.dateArr[rowIndex];const _col_2 = _row_2 > 0 ? 1 : 0;return {rowspan: _row_2,colspan: _col_2,};// 第三列 科室} else if (columnIndex === 2) {const _row_3 = this.deptArr[rowIndex];const _col_3 = _row_3 > 0 ? 1 : 0;return {rowspan: _row_3,colspan: _col_3,};// 第五轮 项目分类} else if (columnIndex === 4) {const _row_4 = this.cateArr[rowIndex];const _col_4 = _row_4 > 0 ? 1 : 0;return {rowspan: _row_4,colspan: _col_4,};// 第四列 患者类别} else if (columnIndex === 3) {const _row_5 = this.patientArr[rowIndex];const _col_5 = _row_5 > 0 ? 1 : 0;return {rowspan: _row_5,colspan: _col_5,};} else if (columnIndex === t) {const _row_6 = len;const _col_6 = 1;return {rowspan: _row_6,colspan: _col_6,};}else if(rowIndex === len){return {rowspan:1,colspan:1}}},
