Element-Ui的表格跨行跨列-实战篇

最新推荐文章于 2024-07-12 16:27:40 发布
Sky_Bug
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量675
点赞数
文章标签： javascript html vue.js
本文链接：https://blog.csdn.net/Sky_Bug/article/details/134735409
版权
Element-UI 表格问题

先上效果图
在这里插入图片描述
首先是这样的布局
主要的问题在于数据的显示，跨行跨列的问题、数据格式化的问题
以下是完整的代码，复制粘贴即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
    <div id="app">
        <button @click="getData">获取数据</button>
        <el-table :data="tableList" border :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}" :span-method="objectSpanMethod">
            <el-table-column label="定价" width="150">
                <el-table-column label="物料名称" prop="parentName"></el-table-column>
                <el-table-column label="预算明细" prop="parentPrice"></el-table-column>
            </el-table-column>
            <el-table-column label="已申请" width="120">
                <el-table-column label="物料名称" prop="name">
                </el-table-column>
                <el-table-column label="预算明细" prop="price">
                </el-table-column>
            </el-table-column>
            <el-table-column label="本次定价" width="120">
                <el-table-column label="物料名称" prop="bencishengqing_name"></el-table-column>
                <el-table-column label="预算明细" prop="bencishengqing_price"></el-table-column>
            </el-table-column>
        </el-table>
    </div>
</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const amountList = [
        {
            // 定价
            pricingList:
                [
                    {
                        // 已申请
                        appliedList: [
                            {
                                parentName: 'A',
                                parentPrice: 1000,
                                name: 'A1',
                                price: 100,
                                index: 1,
                            },
                            {
                                parentName: 'A',
                                parentPrice: 1000,
                                name: 'A2',
                                price: 200,
                                index: 2,
                            },
                            {
                                parentName: 'A',
                                parentPrice: 1000,
                                name: 'A3',
                                price: 300,
                                index: 3,
                            }
                        ],
                        // 本次申请
                        thisApplyList: [
                            {
                                parentName: 'A',
                                parentPrice: 1000,
                                name: 'A4',
                                price: 400,
                                index: 4
                            },
                        ]
                    },
                    {
                        // 已申请
                        appliedList: [
                            {
                                parentName: 'B',
                                parentPrice: 1000,
                                name: 'B',
                                price: 2000,
                                index: 1,
                            }
                        ],
                        // 本次申请
                        thisApplyList: [
                            {
                                parentName: 'B',
                                parentPrice: 1000,
                                name: 'B',
                                price: 3000,
                                index: 1
                            },
                        ]
                    },
                    {
                        // 已申请
                        appliedList: [
                            {
                                parentName: 'C',
                                parentPrice: 1000,
                                name: 'C',
                                price: 2000,
                                index: 1,
                            }
                        ],
                        // 本次申请
                        thisApplyList: [
                            {
                                parentName: 'C',
                                parentPrice: 1000,
                                name: 'C',
                                price: 3000,
                                index: 1
                            },
                        ]
                    },
                ]
        },
    ]
    let mergeArr = [];
    function formatData(data) {
        console.log(data, 'data')
        let oIndex = 0;
        let tempArr = [];
        data.forEach(dataList => {
            let arr = [];
            dataList.appliedList.forEach(item => {
                arr.push(item)
            })
            arr.forEach(item => {
                let isExistIndex = dataList.thisApplyList.findIndex(i => i.index === item.index)
                if (isExistIndex != -1) {
                    item.bencishengqing_name = dataList.thisApplyList[isExistIndex].name
                    item.bencishengqing_price = dataList.thisApplyList[isExistIndex].price
                }
                else {
                    item.bencishengqing_name = ''
                    item.bencishengqing_price = ''
                }
            })
            dataList.thisApplyList.forEach(item => {
                if (arr[item.index - 1]) {
                    arr[item.index - 1] = {
                        ...arr[item.index - 1],
                        bencishengqing_name: item.name,
                        bencishengqing_price: item.price
                    }
                }
                else {
                    const appliedListClone = arr[0]
                    arr[item.index - 1] = {
                        ...appliedListClone,
                        name: '',
                        price: '',
                        bencishengqing_name: item.name,
                        bencishengqing_price: item.price,
                        index: item.index
                    }
                }
            })
            mergeArrFn(sortArr(arr))
        })

    }
    formatData(amountList[0].pricingList)


    function mergeArrFn(arr) {
        arr.forEach(item => {
            mergeArr.push(item)
        })
        console.log(mergeArr, 'mergeArr')
    }



    function sortArr(arr) {
        return arr.sort((a, b) => {
            if (a.index > b.index) {
                return 1
            }
            else {
                return -1
            }
        })
    }

    new Vue({
        el: '#app',
        data() {
            return {
                tableList: mergeArr,
                // 需要合并得列名
                mergeColumns: ['parentName', 'parentPrice'],
                // 关键的key分类,不同的key，相同数据也不合并, 目前只做单条
                keyColumns: 'parentName'
            }
        },
        methods: {
            getData() {
            },
            objectSpanMethod(rowInfo) {
                return this.getRowSpanMethod(rowInfo, this.tableList, this.mergeColumns,this.keyColumns)
            },
            getRowSpanMethod({ row, column, rowIndex, columnIndex }, data, rowSpanArray,keyColumns='') {
                const rowSpanNumObject = {};
                rowSpanArray.map(item => {
                    rowSpanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0, 1);
                    rowSpanNumObject[`${item}-index`] = 0;
                });

                for (let i = 1; i < data.length; i++) {
                    rowSpanArray.map(key => {
                        const index = rowSpanNumObject[`${key}-index`];
                        if (data[i][key] === data[i - 1][key] && data[i][keyColumns] == data[i - 1][keyColumns]) {
                            rowSpanNumObject[key][index]++;
                        } else {
                            rowSpanNumObject[`${key}-index`] = i;
                            rowSpanNumObject[key][i] = 1;
                        }
                    });
                }



                if (rowSpanArray.includes(column['property'])) {
                    const rowspan = rowSpanNumObject[column['property']][rowIndex];
                    if (rowspan > 0) {
                        return { rowspan, colspan: 1 }
                    }
                    return { rowspan: 0, colspan: 0 }
                }
                return { rowspan: 1, colspan: 1 }
            }
        }
    })



</script>