首页 > 其他分享 >vue2使用table进行单元格合并,后面列合并需根据前某列条件合并

vue2使用table进行单元格合并,后面列合并需根据前某列条件合并

时间:2023-08-11 14:55:05浏览次数:46  
标签:index group 某列 car age 单元格 合并 item name

示例:

<table class="table_style">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>车辆</td>
                    <td>房子</td>
                    <td>身份</td>
                </tr>
            </thead>
            <tbody v-for="(group, name) in groupedData" :key="name">
                <template v-for="(item, index) in group">
                    <tr :key="`${name}_${index}`">
                        <template v-if="index === 0 || group[index - 1].name !== item.name">
                            <td :rowspan="getNameRowCount(name)">{{ item.name }}</td>
                        </template>
                        <template v-if="index === 0 || group[index - 1].age !== item.age">
                            <td :rowspan="getAgeRowCount(group, index)">{{ item.age }}</td>
                        </template>
                        <template v-if="index === 0 || group[index - 1].car !== item.car || group[index - 1].name !== item.name || group[index - 1].age !== item.age">
                            <td :rowspan="getCarRowCount(group, index)">{{ item.car }}</td>
                        </template>
                        <td>{{ item.home }}</td>
                        <td>{{ item.identity }}</td>
                    </tr>
                </template>
            </tbody>
        </table>
data() {
        return {
            mergeData:[
                {
                    name:'小明',
                    age:20,
                    car:'大牛',
                    home:'别墅',
                    identity:'平民',
                },
                {
                    name:'小明',
                    age:20,
                    car:'大牛',
                    home:'别墅',
                    identity:'平民',
                },
                {
                    name:'小明',
                    age:30,
                    car:'奔驰',
                    home:'别墅',
                    identity:'平民',
                },
                {
                    name:'小明',
                    age:30,
                    car:'奔驰',
                    home:'别墅',
                    identity:'平民',
                },
                {
                    name:'小李',
                    age:20,
                    car:'大牛',
                    home:'别墅',
                    identity:'平民',
                },
                {
                    name:'小张',
                    age:20,
                    car:'大牛',
                    home:'别墅',
                    identity:'平民',
                },
                {
                    name:'小张',
                    age:30,
                    car:'大牛',
                    home:'别墅',
                    identity:'平民',
                },
            ]
        };
},    
computed: {
        groupedData() {
            const groups = {};
            for (const item of this.mergeData) {
                if (!groups[item.name]) {
                    groups[item.name] = [];
                }
                groups[item.name].push(item);
            }
            return Object.values(groups);
        },
},
methods: {
        getNameRowCount(name) {
            const group = this.groupedData.find(group => group[0].name === name);
            return group ? group.length : 0;
        },
        getAgeRowCount(group, index) {
            let count = 0;
            for (let i = index; i < group.length; i++) {
                if (group[i].age === group[index].age && group[i].name === group[index].name) {
                    count++;
                } else {
                    break;
                }
            }
            return count;
        },
        getCarRowCount(group, index) {
            let count = 0;
            for (let i = index; i < group.length; i++) {
                if (group[i].car === group[index].car && group[i].name === group[index].name && group[i].age === group[index].age) {
                    count++;
                } else {
                    break;
                }
            }
            return count;
        }
}    

 

标签:index,group,某列,car,age,单元格,合并,item,name
From: https://www.cnblogs.com/webway/p/17622966.html

相关文章

  • 【Excel第二讲】单元格格式设置
     数字格式学习表汇总 ......
  • 借助Aspose.Html 将 HTML 模板与 XML 或 JSON 合并
    在现代网络开发中,内容和表示的分离是一个基本原则。HTML模板提供了一种定义网页结构和布局的便捷方法,而JSON和XML数据格式通常用于存储和传输结构化信息。结合这些技术,开发人员可以根据外部源的数据动态生成HTML内容。在这篇博文中,我们将探讨如何在Java中将HTML模板与JS......
  • excel wps宏编辑器,用JavaScript自定义函数设置单元格符合条件后,那一行都变色
        functionjudge(){varapp=Application;//WPS表格的应用程序对象varwb=app.ActiveWorkbook;//当前工作簿varsheet=wb.ActiveSheet;//当前工作表vardataRange=sheet.UsedRange;//使用的数据范围varnumRows=dataRange.Rows......
  • 【Hystrix技术指南】(6)请求合并机制原理分析
    推荐超值课程:点击获取[每日一句]也许你度过了很糟糕的一天,但这并不代表你会因此度过糟糕的一生。[背景介绍]分布式系统的规模和复杂度不断增加,随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中,【熔断、隔离、降级、限流】是经常被使用的。而相关的技......
  • pytorch-两个PyTorch中的Sequential模型合并成一个
    要将两个PyTorch中的Sequential模型合并成一个,你可以使用nn.Sequential的add_module方法或者直接使用*操作符来解包Sequential模型并将它们合并。以下是两种方法的示例:方法一:使用add_module方法importtorch.nnasnn#假设你有两个Sequential模型seq1和seq2seq1=nn.Sequen......
  • 记录--前端实用小技巧: 自动合并的网络请求
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助我们经常会遇到一个场景,比如在一个列表中批量获取用户的信息。 如果我们一次性往后端发送几十条请求是非常愚蠢的事情。此时我们就要学会如何使用批量获取的逻辑。但是批量获取有一个问题就是,我需要在用户列表......
  • 线段树合并学习笔记
    基本思路线段树合并其实就是简单的暴力合并就可以了。一般是运用于权值线段树。通常是在每个节点都需要要一颗线段树才能维护答案,且有多个节点时,会使用线段树合并。但每个节点所有的权值不能太多,如果都是比较满的二叉树的话,时间复杂度就会很高。通常,加入值的数量跟节点数量在同......
  • DataFrame 指定某列的格式
    importpandasaspd#创建示例DataFramedata={'Name':['Alice','Bob','Charlie'],'Age':[25.0,30.0,35.0]#注意:这里的年龄列是浮点数类型}df=pd.DataFrame(data)#将'Age'列的数据类型设置为整数df['......
  • DataFrame修改某列的值
    importpandasaspd#创建示例DataFramedata={'A':[1,2,3],'B':['a','b','c']}df=pd.DataFrame(data)#修改列'A'的值new_values=[10,20,30]df['A']=new_valuesprint......
  • DataFrame删除某列
    importpandasaspd#创建示例DataFramedata={'A':[1,2,3],'B':['a','b','c'],'C':[10,20,30]}df=pd.DataFrame(data)#使用drop()方法删除列'B'df=df.drop('B&......