element表格行列的動態(tài)合并示例詳解

更新時間：2022年07月27日 09:19:36 作者：HPP

這篇文章主要為大家介紹了element表格行列的動態(tài)合并示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

效果圖

合并行

合并列

element的table提供了合并行或者列的方法，并且有一個示例，傳送入口：element.eleme.cn/#/zh-CN/com…

但是實際應用中，后臺數(shù)據(jù)的返回格式和指定合并肯定是動態(tài)且沒有規(guī)律的。element的示例過于簡單，并且也沒有什么太多的解釋。實操中就碰到了這個問題?，F(xiàn)在記錄下來。

代碼詳解

實操中，需要合并的代碼通常就是子數(shù)據(jù)需要進行合并，因為后臺返回的格式都是父數(shù)據(jù)中包裹著子數(shù)據(jù)，這種格式看起來也是比較清晰。方便用在其他地方或者隨時更改需求（比如不需要表格），因此數(shù)據(jù)格式轉換就由前端進行負責了。

數(shù)據(jù)結構

后臺返回的大概就是這種結構

originData: [
    {
        sort: '01',
        children: [
            {
                name: '01-1號'
            },
            {
                name: '01-2號'
            }
        ]
    },
    {
        sort: '02',
        children: [
            {
                name: '02-1號'
            },
        ]
    }
]

行合并

因為element的table展示行的時候是遍歷數(shù)組的，data中有幾條數(shù)據(jù)就會展示出幾行，然而我們進行行合并的時候，肯定是展示子數(shù)據(jù)的行數(shù)。因此，我們需要對原數(shù)據(jù)進行操作，將包裹在children中的數(shù)據(jù)展開，總行數(shù)就是每個children的長度之和。

在展開數(shù)據(jù)的同時，我們就可以進行行合并的合并行數(shù)賦值操作了！

通過map展開數(shù)據(jù)，在展開循環(huán)每一個children時，給children里的第一個元素增加了一個代表著合并長度的字段，值為該children的長度，代表著我這一個數(shù)據(jù)該合并幾行

if(subIndex == 0){
    content['rowNum'] = res.children.length
}

行合并的時候，就可以直接通過判斷rowNum的數(shù)值進行合并了，有rowNum的數(shù)值的表示需要變成rowNum行，沒有的則表示需要隱藏，賦值為0。這一部分記住，雖然合并了行，但是本身還是要占用一列的。如果忘記賦值合并多少列，就會被隱藏掉

if(columnIndex == 0){
    return {
        rowspan: row.rowNum, // 合并行數(shù)
        colspan: row.rowNum>0?1:0  // 合并列數(shù)
    };
}

列合并

列合并的時候不需要去操作數(shù)據(jù)格式了（針對我上面寫的那種格式，具體看后臺返回的數(shù)據(jù)結構），但是需要去知道我的表格里該有多少列，即取最多子元素的children長度，賦值為columnLength

獲得了需要多少列后，就需要進行合并列操作了，我們要獲得幾個值：

總列數(shù)：需要在求出的columnLength的基礎上增加父數(shù)據(jù)的列數(shù)，我這里父數(shù)據(jù)只有sort，因此總列數(shù)需要+1，就是columnLength+1
當前列數(shù)：合并的方法會返回當前行的詳細數(shù)據(jù)，同理還得+1，所以當前列數(shù)是row.children.length+1
待合并列數(shù)的列：表示我第幾列開始需要合并了，即我當前數(shù)據(jù)最后一個有參數(shù)的值，賦值columnSort。在進行判斷之后，等同于當前列數(shù)為row.children.length + 1
待合并列：表示我需要合并成幾列，為總列數(shù)-待合并列數(shù)的列，同時不要忘記自身占一列，需要+1，賦值columnNum，為columnLength + 1 - columnSort + 1

上面的幾個參數(shù)獲取只要理清楚了各個數(shù)據(jù)之間的關系之后，其實并不難，就是普通的加減，但要是理不清楚，著實會暈一段時間。

console.log(`總列數(shù)${this.columnLength+1}，當前列數(shù)${row.children.length+1}`); 
if(row.children.length < this.columnLength){
    let columnSort = row.children.length + 1
    let columnNum = this.columnLength + 1 - columnSort + 1
    if(columnIndex+1 == columnSort){
        return{
            rowspan: 1,
            colspan: columnNum
        }
    }else if(columnIndex+1 > columnSort ){
        return [0, 0];
    }                
    console.log(`第${rowIndex+1}行,第${columnSort}列待合并${columnNum}列`);
}

完整代碼+注釋

<template>
    <div class="order-table-contain">
        <el-tabs v-model="activeName">
            <el-tab-pane label="行合并" name="row">
                <el-table
                    :data="tableRowData"
                    border
                    :height="'530px'"
                    style="width: 100%;"
                    :span-method="mergeRowMethod">
                    <el-table-column
                        align="center"
                        prop="sort"
                        label="編號">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="名稱內(nèi)容">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="列合并" name="column">
                <el-table
                    :data="tableColumnData"
                    border
                    :height="'530px'"
                    style="width: 100%;"
                    :span-method="mergeColumnMethod">
                    <el-table-column
                        align="center"
                        prop="sort"
                        label="編號">
                    </el-table-column>
                    <el-table-column
                        label="名稱內(nèi)容"
                        align="center">
                        <el-table-column
                            v-for="(item, index) in columnLength"
                            :key="index"
                            align="center"
                            prop="name"
                            label="名稱內(nèi)容">
                            <template slot-scope="scope">
                                <span v-if="scope.row.children[index]">
                                    {{scope.row.children[index].name}}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            originData: [
                {
                    sort: '01',
                    children: [
                        {
                            name: '01-1號'
                        },
                        {
                            name: '01-2號'
                        },
                        {
                            name: '01-3號'
                        },
                    ]
                },
                {
                    sort: '02',
                    children: [
                        {
                            name: '02-1號'
                        },
                    ]
                },
                {
                    sort: '03',
                    children: [
                        {
                            name: '03-1號'
                        },
                        {
                            name: '03-2號'
                        },
                        {
                            name: '03-3號'
                        },
                        {
                            name: '03-4號'
                        },
                    ]
                },
                {
                    sort: '04',
                    children: [
                        {
                            name: '04-1號'
                        },
                        {
                            name: '04-2號'
                        },
                    ]
                },
                {
                    sort: '05',
                    children: [
                        {
                            name: '05-1號'
                        },
                    ]
                }
            ],
            tableColumnData: [],
            tableRowData: [],
            activeName: 'row',
            columnLength: 0
        };
    },
    watch:{
        activeName: {
            handler(val){
                if(val == 'row'){
                    this.loadRowData()
                }else{
                    this.loadColumnData()
                }
            },
            immediate: true
        }
    },
    methods: {
        loadRowData(){
            this.tableRowData = []
            let originArr = JSON.parse(JSON.stringify(this.originData))
            // 普通的數(shù)據(jù)轉換，將后臺格式轉換成element表格需要的格式
            if(Array.isArray(originArr)){
                originArr.map(res=>{
                    if(Array.isArray(res.children)){
                        res.children.map((subRes, subIndex)=>{
                            let content = {}
                            content = subRes
                            content['sort'] = res.sort
                            // 重點！賦值合并的行數(shù)數(shù)值，只需要取子循環(huán)的第一個數(shù)賦值待合并的行數(shù)即可
                            if(subIndex == 0){
                                content['rowNum'] = res.children.length
                            }
                            this.tableRowData.push(content)
                        })
                    }
                })
            }
        },
        loadColumnData(){
            this.tableColumnData = JSON.parse(JSON.stringify(this.originData))
            if(Array.isArray(this.tableColumnData)){
                this.tableColumnData.map((res, index)=>{
                    if(Array.isArray(res.children)){
                        // 獲取最大列數(shù)為element的列數(shù)
                        if(index == 0){
                            this.columnLength = res.children.length
                        } else{
                            if(res.children.length > this.columnLength){
                                this.columnLength = res.children.length
                            }
                        }
                    }
                })
            }
        },
        // 合并行
        mergeRowMethod({ row, column, rowIndex, columnIndex }){
            // columnIndex 代表列數(shù)，從0開始計數(shù),我們要合并的字段屬于第一列，取0
            if(columnIndex == 0){
                return {
                    rowspan: row.rowNum, // 待合并行數(shù) -- 合并的行數(shù)長度就等于之前賦值的子數(shù)據(jù)的長度；未賦值的即表示0，不顯示
                    colspan: row.rowNum>0?1:0  // 待合并列數(shù) -- 合并的列數(shù)自身占一列，被合并的要返回0，表示不顯示
                };
            }
        },
        // 合并列
        mergeColumnMethod({ row, column, rowIndex, columnIndex }){            
            console.log(`總列數(shù)${this.columnLength+1}，當前列數(shù)${row.children.length+1}`); // 列數(shù)記得加上父的列數(shù)
            // 當數(shù)據(jù)列數(shù)小于表格列數(shù)，需合并 
            if(row.children.length < this.columnLength){
                let columnSort = row.children.length + 1 // 待合并列序號，表示第幾列待合并 -- 數(shù)據(jù)返回的有數(shù)據(jù)的最后一列，加上第一列
                let columnNum = this.columnLength + 1 - columnSort + 1 // 待合并的列數(shù)需要合并幾列 -- 從0開始計數(shù),并且要加上自身的列數(shù)，需+2
                if(columnIndex+1 == columnSort){
                    return{
                        rowspan: 1,
                        colspan: columnNum
                    }
                }else if(columnIndex+1 > columnSort ){
                    return [0, 0]; // 合并的兩種寫法，被合并的需要賦值0隱藏
                }                
                console.log(`第${rowIndex+1}行,第${columnSort}列待合并${columnNum}列`);
            }
        }
    }
};
</script>
<style lang="less">
.order-table-contain{
    padding: 20px;
    padding-top: 5px;
    box-sizing: border-box;
    // 設置表頭樣式
    .el-table__header-wrapper{
        .el-table__header{
            .is-group{
                tr:nth-child(2){
                    display: none;
                }
            }
        }
    }
}
</style>

以上就是element表格行列的動態(tài)合并示例詳解的詳細內(nèi)容，更多關于element表格行列動態(tài)合并的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: