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

cpdcococo

已于 2023-07-20 11:04:36 修改

阅读量789

点赞数 2

分类专栏： ElementUi 文章标签： elementui 前端 javascript

于 2023-01-12 14:38:59 首次发布

本文链接：https://blog.csdn.net/cpdcococo/article/details/128658690

版权

ElementUi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了在Vue3环境下，如何利用ElementUI的`span-method`属性进行表格列合并。首先展示了一个``的示例，然后详细解释了`span-method`的方法实现，包括处理不同列的合并逻辑。接着，展示了如何处理后端返回的数据，使其适合进行表格列合并，并提供了处理数组的`filterTableData`和`filterTableData1`两个方法。最后，提到了在获取新数据时需要清空合并数组以保证正确性。

摘要由CSDN通过智能技术生成

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 处理表格第二列的合并

item.company_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 (item.company_name === state.tableData[index - 1].company_name) {
                state.spanArr[contactDot] += 1;
                state.spanArr.push(0)
            } else {
                contactDot = index
                state.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 && item.company_name === state.tableData[index - 1].company_name) {
                state.spanArr1[contactDot] += 1;
                state.spanArr1.push(0)
            } else {
                contactDot = index
                state.spanArr1.push(1)
            }
        }
    })
}

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

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

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