记一次动态合并单元格 iview组件库

最新推荐文章于 2022-08-29 11:41:19 发布

别亦难�

最新推荐文章于 2022-08-29 11:41:19 发布

阅读量111

点赞数

分类专栏：自己遇到的问题

原文链接：https://blog.csdn.net/wsjzzcbq/article/details/106079081?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162753905016780357244478%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162753905016780357244478&biz_id=0&utm_mediu

版权

自己遇到的问题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何在Vue.js应用中使用iView UI库实现表格数据的动态合并。通过处理``组件的`span-method`属性，结合数据处理函数，实现了根据特定列值进行单元格合并的功能，适用于展示具有重复值的表格数据，提高数据读取效率。

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

在这里插入代码片<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ViewUI example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>

<body>
    <div id="app">
        <i-table border ref='table' stripe :span-method="handleSpan" :columns="tableItem.columns"
            :data="tableItem.data">
        </i-table>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                tableItem: {
                    columns: [
                        {
                            title: 'Date',
                            key: 'date'
                        },
                        {
                            title: 'Name',
                            key: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age'
                        },
                        {
                            title: 'Address',
                            key: 'add'
                        }
                    ],
                    data: [],
                },

                resData: [
                    {
                        id: '1',
                        name: 'John Brown',
                        age: 18,
                        add: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        id: '1',
                        name: 'John Brown',
                        age: 18,
                        add: 'New York No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        id: '1',
                        name: 'John Brown',
                        age: 18,
                        add: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        id: '1',
                        name: 'Jon Snow',
                        age: 18,
                        add: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
            },
            methods: {
                handleSpan({ row, column, rowIndex, columnIndex }) {
                    //合并第二列,这里columnIndex==1 根据具体业务要在前端写死
                    if (columnIndex == 1) {
                        //计算合并的行数列数
                        let x = row.mergeCol == 0 ? 0 : row.mergeCol
                        let y = row.mergeCol == 0 ? 0 : 1
                        //console.log(x , y)
                        return [x, y]
                    }
                    //合并第二列,这里columnIndex==1 根据具体业务要在前端写死
                    if (columnIndex == 2) {
                        //计算合并的行数列数
                        let x = row.mergeCol1 == 0 ? 0 : row.mergeCol1
                        let y = row.mergeCol1 == 0 ? 0 : 1
                        //console.log(x , y)
                        return [x, y]
                    }
                    //合并第二列,这里columnIndex==1 根据具体业务要在前端写死
                    if (columnIndex == 3) {
                        //计算合并的行数列数
                        let x = row.mergeCol2 == 0 ? 0 : row.mergeCol2
                        let y = row.mergeCol2 == 0 ? 0 : 1
                        //console.log(x , y)
                        return [x, y]
                    }
                },
                assembleData(data) {
                    let names = []
                    //筛选出不重复的 name值,将其放到 names数组中
                    data.forEach(e => {
                        if (!names.includes(e.name)) {
                            names.push(e.name)
                        }
                    })

                    let nameNums = []
                    //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
                    names.forEach(e => {
                        nameNums.push({ name: e, num: 0 })
                    })

                    //计算每种 name值所在行需要合并的单元格数
                    data.forEach(e => {
                        nameNums.forEach(n => {
                            if (e.name == n.name) {
                                n.num++
                            }
                        })
                    })
                    //将计算后的合并单元格数整合到 data中
                    data.forEach(e => {
                        nameNums.forEach(n => {
                            if (e.name == n.name) {
                                if (names.includes(e.name)) {
                                    e.mergeCol = n.num
                                    //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                                    names.splice(names.indexOf(n.name), 1)
                                } else {
                                    //被合并的单元格设置为 0
                                    e.mergeCol = 0
                                }
                            }
                        })
                    })
                    let ages = []
                    //筛选出不重复的 name值,将其放到 names数组中
                    data.forEach(e => {
                        if (!ages.includes(e.age)) {
                            ages.push(e.age)
                        }
                    })

                    let ageNums = []
                    //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
                    ages.forEach(e => {
                        ageNums.push({ age: e, num: 0 })
                    })

                    //计算每种 name值所在行需要合并的单元格数
                    data.forEach(e => {
                        ageNums.forEach(n => {
                            if (e.age == n.age) {
                                n.num++
                            }
                        })
                    })
                    //将计算后的合并单元格数整合到 data中
                    data.forEach(e => {
                        ageNums.forEach(n => {
                            if (e.age == n.age) {
                                if (ages.includes(e.age)) {
                                    e.mergeCol1 = n.num
                                    //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                                    ages.splice(ages.indexOf(n.age), 1)
                                } else {
                                    //被合并的单元格设置为 0
                                    e.mergeCol1 = 0
                                }
                            }
                        })
                    })
                    let adds = []
                    //筛选出不重复的 add值,将其放到 adds数组中
                    data.forEach(e => {
                        if (!adds.includes(e.add)) {
                            adds.push(e.add)
                        }
                    })

                    let addNums = []
                    //将adds数组中的 add值设置默认合并0个单元格,放到 addNums中
                    adds.forEach(e => {
                        addNums.push({ add: e, num: 0 })
                    })

                    //计算每种 add值所在行需要合并的单元格数
                    data.forEach(e => {
                        addNums.forEach(n => {
                            if (e.add == n.add) {
                                n.num++
                            }
                        })
                    })
                    //将计算后的合并单元格数整合到 data中
                    data.forEach(e => {
                        addNums.forEach(n => {
                            if (e.add == n.add) {
                                if (adds.includes(e.add)) {
                                    e.mergeCol2 = n.num
                                    //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                                    adds.splice(adds.indexOf(n.add), 1)
                                } else {
                                    //被合并的单元格设置为 0
                                    e.mergeCol2 = 0
                                }
                            }
                        })
                    })



                    //将整理后的数据交给表格渲染
                    this.tableItem.data = data
                    console.log(data);
                },

            },
            mounted() {
                this.assembleData(this.resData)
                // this.assembleDataage(this.tableItem.data)
            }
        })
    </script>
</body>

</html>

别亦难�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记一次动态合并单元格 iview组件库

在这里插入代码片<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ViewUI example</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> <scri
复制链接

扫一扫

专栏目录