El-table 实现表格单元格多级合并

1.这个是页面table

<el-table :span-method="objectSpanMethod"> </el-table>

2.elementUi 的span-method 方法

注意：我使用的是vue3 ,vue2 可以把state改为this，将spanArr，spanArr1放在data里

const objectSpanMethod = ({ rowIndex,columnIndex })=>{if (columnIndex === 0) { //columnIndex 第几列if (state.spanArr[rowIndex]) {return {rowspan: state.spanArr[rowIndex], //要合并的行数colspan: 1 //要合并的行数}} else {return {rowspan: 0,colspan: 0}}}if (columnIndex === 1) { //第二列if (state.spanArr1[rowIndex]) {return {rowspan: state.spanArr1[rowIndex],colspan: 1}} else {return {rowspan: 0,colspan: 0}}}}

3.将后端的数据拿到后处理为数组，像这样把要要合并的数据排一起，某些字段相同，后端这样返回那就不用处理了

{id: 14, company_name: "男孩子", company_no: "11112", company_id: 67, name: "1", client_terminal_id: "1",…}{id: 13, company_name: "女孩子", company_no: "45646", company_id: 65, name: "1", client_terminal_id: "2",…}{id: 5, company_name: "奥利给", company_no: "3", company_id: 63, name: "23", client_terminal_id: "2",…}{id: 4, company_name: "奥利给", company_no: "3", company_id: 63, name: "23", client_terminal_id: "3",…}{id: 12, company_name: "测试奥利给", company_no: "1", company_id: 4, name: "32",…}{id: 11, company_name: "测试奥利给", company_no: "2", company_id: 4, name: "3", client_terminal_id: "3",…}{id: 10, company_name: "测试奥利给", company_no: "2", company_id: 4, name: "1", client_terminal_id: "2",…}{id: 9, company_name: "测试奥利给", company_no: "2", company_id: 4, name: "13",…}{id: 8, company_name: "测试奥利给", company_no: "2", company_id: 4, name: "1", client_terminal_id: "21",…}{id: 7, company_name: "测试奥利给", company_no: "2", company_id: 4, name: "23", client_terminal_id: "4",…

4.tableDate为处理后的数组，

第一个方法返回的数组spanArr 处理表格第一列的合并

第二个方法返回的数组spanArr1 处理表格第二列的合并

pany_name 中company_name 为你想要根据哪个字段要合并

注意：我使用的是vue3 ,vue2 可以把state改为this，将spanArr，spanArr1放在data里

const filterTableData = () => {let contactDot = 0;state.tableData.forEach((item, index) => {if (index == 0) {state.spanArr.push(1)} else {if (pany_name === state.tableData[index - 1].company_name) {state.spanArr[contactDot] += 1;state.spanArr.push(0)} else {contactDot = indexstate.spanArr.push(1)}}})}const filterTableData1 = () => {let contactDot = 0;state.tableData.forEach((item, index) => {if (index == 0) {state.spanArr1.push(1)} else {if (item.name === state.tableData[index - 1].name && pany_name === state.tableData[index - 1].company_name) {state.spanArr1[contactDot] += 1;state.spanArr1.push(0)} else {contactDot = indexstate.spanArr1.push(1)}}})}

5..这个rest是调取后端接口返回数据 然后一定要清除spanArr ，和spanArr 1变量，也就是说每次

调用filterTableData，filterTableData1方法都要先清除 ，这样就可以了。合并更多列更多级道理都一样，然后把代码封装一下就可以了

const getTable = async ()=>{let rest = await Api()state.pageTotal = rest.totalstate.tableData = rest.datastate.spanArr = []state.spanArr1 = []filterTableData()filterTableData1()}