element 动态合并表格---进阶版

错误展示

错误

正确展示

正确

如果使用上次博客写的element 动态合并表格那么会出现上述图片情况,所以对其进行完善实现下图(正确展示)情况

处理函数

mergeTableRow(data, merge) {
    if (!merge || merge.length === 0) {
        return data;
    }
    merge.forEach((m) => {
        const mList = {};
        let spliceLocation = merge.indexOf(m)
        data = data.map((v, index) => {
            const rowVal = v[m];
            if (mList[rowVal] && mList[rowVal].newIndex === index) {
                // flag为true的时候代表当前值的前者与上一个值相等
                /*
                    只有当当前merge之前的所有merge的值的当前index等于index-1  才允许当前merge合并
                */
                let flag = false;
                let mergeSolve = merge.slice(0,spliceLocation);
                mergeSolve.slice(0,spliceLocation).forEach(mergeItem=>{
                    if(data[index][mergeItem] == data[index-1][mergeItem]){
                        flag = true
                    }
                })
                if( m == merge[0] ){
                    flag = true;
                }
                if(flag){
                    mList[rowVal]["num"]++;
                    mList[rowVal]["newIndex"]++;
                    data[mList[rowVal]["index"]][m + "-span"].rowspan++;
                    v[m + "-span"] = {
                        rowspan: 0,
                        colspan: 0,
                    };
                }else{
                    mList[rowVal] = {
                        num: 1,
                        index: index,
                        newIndex: index + 1,
                    };
                    v[m + "-span"] = {
                        rowspan: 1,
                        colspan: 1,
                    }; 
                }
            } else {
                mList[rowVal] = {
                    num: 1,
                    index: index,
                    newIndex: index + 1,
                };
                v[m + "-span"] = {
                    rowspan: 1,
                    colspan: 1,
                };
            }
            return v;
        });
    });
    return data;
},

数据处理

let dataSolve = this.mergeTableRow(res.data.data, ["feature", "state"]);

elementUI表格配置项

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    const span = column["property"] + "-span";
    if (row[span]) {
        return row[span];
    }
},

实际案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="app">
    <el-table style="width:840px" :data="historyData" :span-method="objectSpanMethod" :border="true">
        <el-table-column prop="feature" label="Feature" align="center" width="140">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="140">
        </el-table-column>
        <el-table-column prop="type" label="任务类型" align="center" width="140">
        </el-table-column>
        <el-table-column prop="owner" label="负责人" align="center" width="140">
        </el-table-column>
    </el-table>
</div>

<body>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    historyData: [],
                }
            },
            mounted() {
                let dataArr = [
                    {
                        "feature": "Change",
                        "state": "已完成",
                        "type": "机翼",
                        "owner": "小王",
                        "week10Plan": "1.0",
                        "week10Book": "1.0",
                        "week11Plan": "0.0",
                        "week11Book": "0.0",
                        "week12Plan": "0.0",
                        "week12Book": "0.0"
                    },
                    {
                        "feature": "Change",
                        "state": "已完成",
                        "type": "尾部",
                        "owner": "小王",
                        "week10Plan": "1.0",
                        "week10Book": "1.0",
                        "week11Plan": "0.0",
                        "week11Book": "0.0",
                        "week12Plan": "0.0",
                        "week12Book": "0.0"
                    },
                    {
                        "feature": "Perfor",
                        "state": "已完成",
                        "type": "头部",
                        "owner": "小王",
                        "week10Plan": "1.0",
                        "week10Book": "1.0",
                        "week11Plan": "0.0",
                        "week11Book": "0.0",
                        "week12Plan": "0.0",
                        "week12Book": "0.0"
                    },
                    {
                        "feature": "Power",
                        "state": "未完成",
                        "type": "翅膀",
                        "owner": "小王",
                        "week10Plan": "0.0",
                        "week10Book": "0.0",
                        "week11Plan": "1.0",
                        "week11Book": "0.0",
                        "week12Plan": "5.0",
                        "week12Book": "5.0"
                    },
                    {
                        "feature": "Touch",
                        "state": "已完成",
                        "type": "机舱仪器",
                        "owner": "小王",
                        "week10Plan": "1.0",
                        "week10Book": "1.0",
                        "week11Plan": "0.0",
                        "week11Book": "0.0",
                        "week12Plan": "0.0",
                        "week12Book": "0.0"
                    }
                ]
                let dataSolve = this.mergeTableRow(dataArr, ["feature", "state"]);
                this.historyData = dataSolve;
            },
            methods: {
                // 合并表格
                mergeTableRow(data, merge) {
                    if (!merge || merge.length === 0) {
                        return data;
                    }
                    merge.forEach((m) => {
                        const mList = {};
                        let spliceLocation = merge.indexOf(m)
                        data = data.map((v, index) => {
                            const rowVal = v[m];
                            if (mList[rowVal] && mList[rowVal].newIndex === index) {
                                // flag为true的时候代表当前值的前者与上一个值相等
                                /*
                                    只有当当前merge之前的所有merge的值的当前index等于index-1  才允许当前merge合并
                                */
                                let flag = false;
                                let mergeSolve = merge.slice(0, spliceLocation);
                                mergeSolve.slice(0, spliceLocation).forEach(mergeItem => {
                                    if (data[index][mergeItem] == data[index - 1][mergeItem]) {
                                        flag = true
                                    }
                                })
                                if (m == merge[0]) {
                                    flag = true;
                                }
                                if (flag) {
                                    mList[rowVal]["num"]++;
                                    mList[rowVal]["newIndex"]++;
                                    data[mList[rowVal]["index"]][m + "-span"].rowspan++;
                                    v[m + "-span"] = {
                                        rowspan: 0,
                                        colspan: 0,
                                    };
                                } else {
                                    mList[rowVal] = {
                                        num: 1,
                                        index: index,
                                        newIndex: index + 1,
                                    };
                                    v[m + "-span"] = {
                                        rowspan: 1,
                                        colspan: 1,
                                    };
                                }
                            } else {
                                mList[rowVal] = {
                                    num: 1,
                                    index: index,
                                    newIndex: index + 1,
                                };
                                v[m + "-span"] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            }
                            return v;
                        });
                    });
                    return data;
                },
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    const span = column["property"] + "-span";
                    if (row[span]) {
                        return row[span];
                    }
                },
            }
        })
    </script>
</body>
</html>
posted @ 2021-07-22 15:54  扰晨  阅读(237)  评论(1编辑  收藏  举报