el-table表格動(dòng)態(tài)合并行及合并行列實(shí)例詳解

更新時(shí)間：2022年10月12日 11:39:03 作者：我是段段

在使用el-table的時(shí)候經(jīng)常會(huì)涉及到表格的列合并，包括表格操作列的合并,下面這篇文章主要給大家介紹了關(guān)于el-table表格動(dòng)態(tài)合并行及合并行列的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在寫項(xiàng)目的時(shí)候有時(shí)候會(huì)經(jīng)常遇到把行和列合并起來的情況，因?yàn)橛行?shù)據(jù)是重復(fù)渲染的，不合并行列會(huì)使表格看起來非常的混亂，如下：

而我們想要的數(shù)據(jù)是下面這種情況，將重復(fù)的行進(jìn)行合并，使表格看起來簡(jiǎn)單明了，如下：

1、合并行

所謂的合并行就是將多行相同的數(shù)據(jù)變成一行來顯示，直接上代碼，頁面的布局比較簡(jiǎn)單

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="time" label="時(shí)間"></el-table-column>
            <el-table-column prop="grade" label="年級(jí)"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="subjects" label="科目"></el-table-column>
            <el-table-column prop="score" label="成績(jī)"></el-table-column>
        </el-table>
    </div>
</template>

span-method是el-table上屬性，其值是一個(gè)函數(shù)，objectSpanMethod方法是用來處理合并行的返回值，tableData數(shù)據(jù)如下：

tableData: [
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '語文', score: 80 },
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '數(shù)學(xué)', score: 80 }, 
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '語文', score: 70 },
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '數(shù)學(xué)', score: 80 },
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '語文', score: 60 }, 
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '數(shù)學(xué)', score: 60 }, 
],
mergeObj: {}, // 用來記錄需要合并行的下標(biāo)
mergeArr: ['time', 'grade', 'name', 'subjects', 'score'] // 表格中的列名

首先需要對(duì)數(shù)據(jù)就行處理，就是比較當(dāng)前行與上一行的值是否相等（如果是第一行數(shù)據(jù)，直接將值賦值為1）

在mounted中調(diào)用數(shù)據(jù)初始化數(shù)據(jù)的方法，如下：

mounted() {
    this.getSpanArr(this.tableData);
}

// getSpanArr方法
getSpanArr(data) {
    this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用來記錄需要合并行的起始位置
        this.mergeObj[key] = []; // 記錄每一列的合并信息
        data.forEach((item, index) => {
            // index == 0表示數(shù)據(jù)為第一行，直接 push 一個(gè) 1
            if(index === 0) {
                this.mergeObj[key].push(1); 
            } else {
                // 判斷當(dāng)前行是否與上一行其值相等 如果相等 在 count 記錄的位置其值 +1 表示當(dāng)前行需要合并 并push 一個(gè) 0 作為占位
                if(item[key] === data[index - 1][key]) { 
                    this.mergeObj[key][count] += 1;
                    this.mergeObj[key].push(0);
                } else {
                    // 如果當(dāng)前行和上一行其值不相等 
                    count = index; // 記錄當(dāng)前位置 
                    this.mergeObj[key].push(1); // 重新push 一個(gè) 1
                }
            }
        })
    })
}

數(shù)據(jù)處理好之后就可以調(diào)用objectSpanMethod方法了，如下：

// objectSpanMethod方法
// 默認(rèn)接受四個(gè)值 { 當(dāng)前行的值, 當(dāng)前列的值, 行的下標(biāo), 列的下標(biāo) }
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]; 
        }
    }
}

合并后的結(jié)果就是我們想要的形式：

合并行完整的代碼如下：

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="time" label="時(shí)間"></el-table-column>
            <el-table-column prop="grade" label="年級(jí)"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="subjects" label="科目"></el-table-column>
            <el-table-column prop="score" label="成績(jī)"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'Table',
    data() {
        return {
            tableData: [
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '語文', score: 80 },
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '數(shù)學(xué)', score: 80 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '語文', score: 70 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '數(shù)學(xué)', score: 80 },
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '語文', score: 60 }, 
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '數(shù)學(xué)', score: 60 }, 

            ],
            mergeObj: {},
            mergeArr: ['time', 'grade', 'name', 'subjects', 'score'],
        };
    },
    methods: {
        getSpanArr(data) {
            this.mergeArr.forEach((key, index1) => {
                let count = 0; // 用來記錄需要合并行的起始位置
                this.mergeObj[key] = []; // 記錄每一列的合并信息
                data.forEach((item, index) => {
                    // index == 0表示數(shù)據(jù)為第一行，直接 push 一個(gè) 1
                    if(index === 0) {
                        this.mergeObj[key].push(1); 
                    } else {
                        // 判斷當(dāng)前行是否與上一行其值相等 如果相等 在 count 記錄的位置其值 +1 表示當(dāng)前行需要合并 并push 一個(gè) 0 作為占位
                        if(item[key] === data[index - 1][key]) { 
                            this.mergeObj[key][count] += 1;
                            this.mergeObj[key].push(0);
                        } else {
                            // 如果當(dāng)前行和上一行其值不相等 
                            count = index; // 記錄當(dāng)前位置 
                            this.mergeObj[key].push(1); // 重新push 一個(gè) 1
                        }
                    }
                })
            })
        },
        // 默認(rèn)接受四個(gè)值 { 當(dāng)前行的值, 當(dāng)前列的值, 行的下標(biāo), 列的下標(biāo) }
        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]; 
                }
            }
        }
    },
    mounted() {
        this.getSpanArr(this.tableData);
    }
};
</script>

<style lang="stylus" scoped>
.table 
    height 100vh
    width 100%
    padding 40px
    box-sizing border-box
    /deep/ .el-table__body tr:hover > td
        background-color: #fff;
</style>

2、合并行列

調(diào)整下數(shù)據(jù)，如下：

tableData: [
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '語文', score: 80 },
    { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '數(shù)學(xué)', score: 80 }, 
    { time: '2020-08-10', grade: '總成績(jī)', name: '總成績(jī)', subjects: '總成績(jī)', score: 160 },
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '語文', score: 70 },
    { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '數(shù)學(xué)', score: 80 },
    { time: '2020-08-10', grade: '總成績(jī)', name: '總成績(jī)', subjects: '總成績(jī)', score: 150 }, 
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '語文', score: 60 }, 
    { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '數(shù)學(xué)', score: 60 }, 
    { time: '2020-08-11', grade: '總成績(jī)', name: '總成績(jī)', subjects: '總成績(jī)', score: 120 }
],

可以看到上面的數(shù)據(jù)多了一行總成績(jī)，現(xiàn)在的數(shù)據(jù)在頁面顯示效果如下：

可以看到總成績(jī)的三個(gè)列并沒有合并，并不是我們想要的效果，所以需要換一種思路來處理數(shù)據(jù)

頁面的布局也有所調(diào)整，如下：

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethods" border style="width: 100%">
            <template v-for="cols in colConfigs">
                <!-- 無需合并的列 -->
                <el-table-column
                    v-if="cols.type === 'label' && !cols.children"
                    :key="cols.prop"
                    :prop="cols.prop"
                    :label="cols.label"
                >
                </el-table-column>
                <!-- 需要合并的列 -->
                <template v-else-if="cols.type === 'label' && cols.children">
                    <el-table-column
                        v-for="children in cols.children"
                        :key="children.prop"
                        :prop="children.prop"
                        :label="children.label"
                    />
                </template>
            </template>
        </el-table>
    </div>
</template>

tableData中的數(shù)據(jù)就是上面調(diào)整后的，還需要聲明的變量如下：

// 表格的信息 需要合并的需要放在 children 中
colConfigs: [
    {
        type: 'label',
        children: [
            { prop: 'time', label: '時(shí)間' },
            { prop: 'grade', label: '年級(jí)' },
            { prop: 'name', label: '姓名' },
            { prop: 'subjects', label: '科目' },
            { prop: 'score', label: '成績(jī)' }
        ]
    }
],
// 需要合并的行列信息
mergeCols: [
    { index: 0, name: 'time' },
    { index: 1, name: 'grade' },
    { index: 2, name: 'name' },
    { index: 3, name: 'subjects' },
    { index: 4, name: 'score' },
],
// 用來記錄每一個(gè)單元格的下標(biāo)
tableMergeIndex: [],

首先也需要處理數(shù)據(jù)，在mounted中調(diào)用數(shù)據(jù)初始化數(shù)據(jù)的方法，如下：

mounted() {
    if(this.mergeCols.length > 0) {
        this.newTableMergeData();
    }
}

// newTableMergeData方法
newTableMergeData() {
    for (let i = 0; i < this.tableData.length; i++) {
        for (let j = 0; j < this.mergeCols.length; j++) {
            // 初始化行、列坐標(biāo)信息
            let rowIndex = 1;
            let columnIndex = 1;
            // 比較橫坐標(biāo)左方的第一個(gè)元素
            if (j > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i][this.mergeCols[j - 1]['name']]) {
                columnIndex = 0;
            }
            // 比較縱坐標(biāo)上方的第一個(gè)元素
            if (i > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i - 1][this.mergeCols[j]['name']]) {
                rowIndex = 0;
            }
            // 比較橫坐標(biāo)右方元素
            if (columnIndex > 0) {
                columnIndex = this.onColIndex(this.tableData[i], j, j + 1, 1, this.mergeCols.length);
            }
            // 比較縱坐標(biāo)下方元素
            if (rowIndex > 0) {
                rowIndex = this.onRowIndex(this.tableData, i, i + 1, 1, this.mergeCols[j]['name']);
            }
            let key = this.mergeCols[j]['index'] + '_' + i;
            this.tableMergeIndex[key] = [rowIndex, columnIndex];
        }
    }
},
/**
  * 計(jì)算列坐標(biāo)信息
  * data 單元格所在行數(shù)據(jù)
  * index 當(dāng)前下標(biāo)
  * nextIndex 下一個(gè)元素坐標(biāo)
  * count 相同內(nèi)容的數(shù)量
  * maxLength 當(dāng)前行的列總數(shù)
  */
onColIndex(data, index, nextIndex, count, maxLength) {
    // 比較當(dāng)前單元格中的數(shù)據(jù)與同一行之后的單元格是否相同
    if (nextIndex < maxLength && data[this.mergeCols[index]['name']] === data[this.mergeCols[nextIndex]['name']]) {
        return this.onColIndex(data, index, ++nextIndex, ++count, maxLength);
    }
    return count;
},
/**
  * 計(jì)算行坐標(biāo)信息
  * data 表格總數(shù)據(jù)
  * index 當(dāng)前下標(biāo)
  * nextIndex 下一個(gè)元素坐標(biāo)
  * count 相同內(nèi)容的數(shù)量
  * name 數(shù)據(jù)的key
  */
onRowIndex(data, index, nextIndex, count, name) {
    // 比較當(dāng)前單元格中的數(shù)據(jù)與同一列之后的單元格是否相同
    if (nextIndex < data.length && data[index][name] === data[nextIndex][name]) {
        return this.onRowIndex(data, index, ++nextIndex, ++count, name);
    }
    return count;
}

數(shù)據(jù)處理好之后就可以調(diào)用objectSpanMethods方法了，如下：

objectSpanMethods({ row, column, rowIndex, columnIndex }) {
    let key = columnIndex + '_' + rowIndex;
    if (this.tableMergeIndex[key]) {
        return this.tableMergeIndex[key];
    }
}

實(shí)現(xiàn)的效果圖如下：

合并行列的完整代碼如下：

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethods" border style="width: 100%">
            <template v-for="cols in colConfigs">
                <!-- 無需合并的列 -->
                <el-table-column
                    v-if="cols.type === 'label' && !cols.children"
                    :key="cols.prop"
                    :prop="cols.prop"
                    :label="cols.label"
                >
                </el-table-column>
                <!-- 需要合并的列 -->
                <template v-else-if="cols.type === 'label' && cols.children">
                    <el-table-column
                        v-for="children in cols.children"
                        :key="children.prop"
                        :prop="children.prop"
                        :label="children.label"
                    />
                </template>
            </template>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'Table',
    data() {
        return {
            tableData: [
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '語文', score: 80 },
                { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '數(shù)學(xué)', score: 80 }, 
                { time: '2020-08-10', grade: '總成績(jī)', name: '總成績(jī)', subjects: '總成績(jī)', score: 160 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '語文', score: 70 },
                { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '數(shù)學(xué)', score: 80 },
                { time: '2020-08-10', grade: '總成績(jī)', name: '總成績(jī)', subjects: '總成績(jī)', score: 150 }, 
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '語文', score: 60 }, 
                { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '數(shù)學(xué)', score: 60 }, 
                { time: '2020-08-11', grade: '總成績(jī)', name: '總成績(jī)', subjects: '總成績(jī)', score: 120 }
            ],
            // 表格的信息 需要合并的需要放在 children 中
            colConfigs: [
                {
                    type: 'label',
                    children: [
                        { prop: 'time', label: '時(shí)間' },
                        { prop: 'grade', label: '年級(jí)' },
                        { prop: 'name', label: '姓名' },
                        { prop: 'subjects', label: '科目' },
                        { prop: 'score', label: '成績(jī)' }
                    ]
                },
                // { type: 'label', prop: 'age', label: '年齡' }
            ],
            // 需要合并的行列信息 index必須是table表格對(duì)應(yīng)的下標(biāo) 不能隨意修改
            mergeCols: [
                { index: 0, name: 'time' },
                { index: 1, name: 'grade' },
                { index: 2, name: 'name' },
                { index: 3, name: 'subjects' },
                { index: 4, name: 'score' },
                // { index: 5, name: 'age' }
            ],
            // 用來記錄每一個(gè)單元格的下標(biāo)
            tableMergeIndex: [],
        };
    },
    methods: {
        objectSpanMethods({ row, column, rowIndex, columnIndex }) {
            let key = columnIndex + '_' + rowIndex;
            if (this.tableMergeIndex[key]) {
                return this.tableMergeIndex[key];
            }
        },
        newTableMergeData() {
            for (let i = 0; i < this.tableData.length; i++) {
                for (let j = 0; j < this.mergeCols.length; j++) {
                    // 初始化行、列坐標(biāo)信息
                    let rowIndex = 1;
                    let columnIndex = 1;
                    // 比較橫坐標(biāo)左方的第一個(gè)元素
                    if (j > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i][this.mergeCols[j - 1]['name']]) {
                        columnIndex = 0;
                    }
                    // 比較縱坐標(biāo)上方的第一個(gè)元素
                    if (i > 0 && this.tableData[i][this.mergeCols[j]['name']] === this.tableData[i - 1][this.mergeCols[j]['name']]) {
                        rowIndex = 0;
                    }
                    // 比較橫坐標(biāo)右方元素
                    if (columnIndex > 0) {
                        columnIndex = this.onColIndex(this.tableData[i], j, j + 1, 1, this.mergeCols.length);
                    }
                    // 比較縱坐標(biāo)下方元素
                    if (rowIndex > 0) {
                        rowIndex = this.onRowIndex(this.tableData, i, i + 1, 1, this.mergeCols[j]['name']);
                    }
                    let key = this.mergeCols[j]['index'] + '_' + i;
                    this.tableMergeIndex[key] = [rowIndex, columnIndex];
                }
            }
        },
        /**
         * 計(jì)算列坐標(biāo)信息
         * data 單元格所在行數(shù)據(jù)
         * index 當(dāng)前下標(biāo)
         * nextIndex 下一個(gè)元素坐標(biāo)
         * count 相同內(nèi)容的數(shù)量
         * maxLength 當(dāng)前行的列總數(shù)
         */
        onColIndex(data, index, nextIndex, count, maxLength) {
            // 比較當(dāng)前單元格中的數(shù)據(jù)與同一行之后的單元格是否相同
            if (nextIndex < maxLength && data[this.mergeCols[index]['name']] === data[this.mergeCols[nextIndex]['name']]) {
                return this.onColIndex(data, index, ++nextIndex, ++count, maxLength);
            }
            return count;
        },
        /**
         * 計(jì)算行坐標(biāo)信息
         * data 表格總數(shù)據(jù)
         * index 當(dāng)前下標(biāo)
         * nextIndex 下一個(gè)元素坐標(biāo)
         * count 相同內(nèi)容的數(shù)量
         * name 數(shù)據(jù)的key
         */
        onRowIndex(data, index, nextIndex, count, name) {
            // 比較當(dāng)前單元格中的數(shù)據(jù)與同一列之后的單元格是否相同
            if (nextIndex < data.length && data[index][name] === data[nextIndex][name]) {
                return this.onRowIndex(data, index, ++nextIndex, ++count, name);
            }
            return count;
        }
    },
    mounted() {
        if(this.mergeCols.length > 0) {
            this.newTableMergeData();
        }
    }
};
</script>

<style lang="stylus" scoped>
.table 
    height 100vh
    width 100%
    padding 40px
    box-sizing border-box
    /deep/ .el-table__body tr:hover > td
        background-color: #fff;
</style>

如果用不想合并的行需要在colConfigs中調(diào)整，如下：

// 增加一個(gè)年齡屬性 但是不進(jìn)行合并
colConfigs: [
    {
        type: 'label',
        children: [
            { prop: 'time', label: '時(shí)間' },
            { prop: 'grade', label: '年級(jí)' },
            { prop: 'name', label: '姓名' },
            { prop: 'subjects', label: '科目' },
            { prop: 'score', label: '成績(jī)' }
        ]
    },
    { type: 'label', prop: 'age', label: '年齡' }
]

效果圖如下：

如果想要合并，需要在mergeCols中添加數(shù)據(jù)，如下：

mergeCols: [
    { index: 0, name: 'time' },
    { index: 1, name: 'grade' },
    { index: 2, name: 'name' },
    { index: 3, name: 'subjects' },
    { index: 4, name: 'score' },
    { index: 5, name: 'age' } // 添加需要合并的age列信息 注意index的值
],

新添加的屬性合并后效果圖如下：

以上就是el-table表格合并行列的內(nèi)容，有不懂的地方歡迎留言討論~

總結(jié)

到此這篇關(guān)于el-table表格動(dòng)態(tài)合并行及合并行列的文章就介紹到這了,更多相關(guān)el-table表格動(dòng)態(tài)合并行列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: