vue 动态合并element-ui el-table列和行

最新推荐文章于 2024-07-09 12:13:23 发布
最新推荐文章于 2024-07-09 12:13:23 发布
阅读量1.3k 收藏 6
点赞数 3
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39246975/article/details/109315891
版权

效果图：
在这里插入图片描述
HTML:

<template>
    <div class="HeBingTable">
        <el-table
         :data="tableData"
         show-summary
         :span-method="arraySpanMethod"
        style="width: 100%">
            <el-table-column
            v-for="(item,index) in dataHeader"
            :prop="item.children===undefined?item.prop:''"
            :label="item.label"
            :sortable="item.sortable?true:false"
            :key="index">
                <template v-if="item.children">
                    <el-table-column v-for="(child,indexChild) in item.children"
                    :prop="child.prop"
                    :label="child.label"
                    :sortable="item.child?true:false"
                    :key="indexChild">

                    </el-table-column>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

JS:

<script>
export default {
    
    name:"HeBingTable",
    data(){
        return{
            tableData:[
                {
                    cangku:"百应总库",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE021521",
                    changpinxinghao:"DP01",
                    chanpindanwei:"台",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                },
                {
                    cangku:"百应总库",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE021522",
                    changpinxinghao:"DP01",
                    chanpindanwei:"台1",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                },
                {
                    cangku:"百应总库",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE021523",
                    changpinxinghao:"DP012",
                    chanpindanwei:"台",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                },
                {
                    cangku:"百应总库",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE02152",
                    changpinxinghao:"DP01",
                    chanpindanwei:"台",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                },
                {
                    cangku:"百应总库",
                    chanpinmingcheng:"总计",
                    chanpinbianhao:"",
                    changpinxinghao:"",
                    chanpindanwei:"",
                    shuliang:"10",
                    jine:"10",
                    shuliang1:"20",
                    jine2:"11",
                },
                {
                    cangku:"百应总库1",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE02152",
                    changpinxinghao:"DP01",
                    chanpindanwei:"台",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                },
                {
                    cangku:"百应总库1",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE02152",
                    changpinxinghao:"DP012",
                    chanpindanwei:"台",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                },
                {
                    cangku:"百应总库1",
                    chanpinmingcheng:"华强北服务器",
                    chanpinbianhao:"NFDE02152",
                    changpinxinghao:"DP01",
                    chanpindanwei:"台",
                    shuliang:"1",
                    jine:"1",
                    shuliang1:"2",
                    jine2:"10",
                }
            ],
            dataHeader:[
                {
                    prop:"cangku",
                    label:"仓库"
                },
                {
                    prop:"chanpinmingcheng",
                    label:"产品名称"
                },
                {
                    prop:"chanpinbianhao",
                    label:"产品编号"
                },
                {
                    prop:"changpinxinghao",
                    label:"产品型号"
                },
                {
                    prop:"chanpindanwei",
                    label:"产品单位"
                },
                {
                    label:"产品型号",
                    children:[
                        {
                            prop:"shuliang",
                            label:"(数量)",
                            sortable:true
                        },
                        {
                            prop:"jine",
                            label:"（金额）",
                            sortable:true
                        }
                    ]
                },
                {
                    label:"产品出场",
                    children:[
                        {
                            prop:"shuliang1",
                            label:"(数量)"
                        },
                        {
                            prop:"jine2",
                            label:"（金额）"
                        }
                    ]
                }
            ],
            indexssss:null
        }
    },
    methods:{
         arraySpanMethod({row, column, rowIndex, columnIndex}){
            const that = this;
            let num = 0;
            var key = column.property;
            var val =  that.tableData[rowIndex][key];
            var cangku = that.tableData[rowIndex]['cangku'];
            //合并行
            for (let i in that.tableData) { //遍历items
            for (let j in that.tableData[i]) { //再遍历item的key
                if (j == 'cangku' || j=='chanpinmingcheng'||j=='chanpinbianhao' || j=='changpinxinghao'|| j=='chanpindanwei') { //如果j等于这三者其中一个
                if (key === j && val === that.tableData[i][j]) { //再判断j是否等于key,并且val等于items里面的items[i][j]的值
                    if (that.tableData[i][j] == '小计:' || that.tableData[i][j] == '总计') { //如果等于则判断是否未小计、合计
                        console.log(rowIndex);
                        console.log(columnIndex)
                        
                        that.indexssss = rowIndex;
                        return;//如果是，则不用合并列
                    }
                    //合并列，用于总计
                    if(rowIndex==that.indexssss &&  that.tableData[i][j]==""){
                        let columnd = that.getNumber(rowIndex,columnIndex,j);//得到为空的格子
                        if(columnd>0){
                            return{
                                rowspan:1,
                                colspan: columnd
                            }
                        }
                        return{
                            rowspan:0,
                            colspan:0
                        };
                    }
                    //合并行
                    if(rowIndex !=0){
                        //先计算是否和上一个值相等，如果相等，则为0，如果不相等，证明是第一个。或者是重新的第一个 ：类似于 ：0，0，1，0，0
                        if(that.tableData[rowIndex][key]==that.tableData[rowIndex-1][key] && that.tableData[rowIndex]['cangku']==that.tableData[rowIndex-1]['cangku']){
                            return{
                                rowspan:0,
                                colspan:0
                            }
                        }else{
                            var numss = that.getNumForValue(key,val,cangku,rowIndex);
                            return{
                            rowspan:numss,
                            colspan:1
                            }
                        }
                    }else{
                        if(that.tableData[rowIndex][key]==that.tableData[rowIndex+1][key] && that.tableData[rowIndex]['cangku']==that.tableData[rowIndex+1]['cangku']){
                            var numss = that.getNumForValue(key,val,cangku,rowIndex);
                            return{
                                rowspan:numss,
                                colspan:1
                            }
                        }else{
                             return{
                                rowspan:1,
                                colspan:1
                            }
                        }
                    }
                    // var index = that.tableData.findIndex(item=>{
                    //     return item[key] == val && item['cangku'] === cangku;
                    // })
                    // if(rowIndex==index){
                    //     //证明是第一个,算出需要合并多少行
                    //     var numss = that.getNumForValue(key,val,cangku,rowIndex);
                    //     return{
                    //     rowspan:numss,
                    //     colspan:1
                    //     }
                    // }else{
                    //     //其他的隐藏
                    //     return{
                    //     rowspan:0,
                    //     colspan:0
                    //     }
                    // }
                }
                }
            }
            }
        },
         //得到重复值的数量
        getNumForValue(key,val,xuhao,rowIndex){
            const that = this;
            let num = 1;
            // for (let i in that.tableData) { //遍历items
            //     for (let j in that.tableData[i]) { //再遍历item的key
            //         if (j == 'cangku' || j=='chanpinmingcheng' ||j=='chanpinbianhao' || j=='changpinxinghao'|| j=='chanpindanwei') { //如果j等于这三者其中一个
            //         if (key === j && val === that.tableData[i][j] && xuhao===that.tableData[i]['cangku']) { //再判断j是否等于key,并且val等于items里面的items[i][j]的值
            //             if (that.tableData[i][j] == '小计:' || that.tableData[i][j] == '合计:') { //如果等于则判断是否未小计、合计
            //                 console.log(val+"："+num)
            //                 return 0;//如果是，则不用合并列
            //             }
            //             num++;//如果不是。则合并，合并数加1
            //         }
            //         }
            //     }
            // }
            // debugger
            for(let i=rowIndex;i<that.tableData.length;i++){
                if(i != that.tableData.length-1){
                    if(that.tableData[i][key]==that.tableData[i+1][key]){
                        num++;
                    }else{
                        break;
                    }
                }else{
                    //最后一行
                     if(that.tableData[i][key]==val){
                        num++;
                    }else{
                        break;
                    }
                }
            }
            return num;
        },
      //得到下一个值是否为空，如果是，则返回
        getNumber(rowIndex,columnIndex,j){
            console.log(rowIndex);
            console.log(columnIndex)
            let that = this;
            let preIndex = ""; //字段的前一个
            let num=0;
            //找到该字段上方的字段是否为空，如果为空，则继续为0，如果不为空。则判断下方是否为空，为空的有多少个。
            for(let i in that.tableData[rowIndex]){
                if(i==j){
                    break;
                }
                preIndex = i;
            }
            if(that.tableData[rowIndex][preIndex] == ""){
                return num;
            }
            //找到有下方有多少个
            let isBegin = false;
            let uu = false;
            for(let k in that.tableData[rowIndex]){
                if(uu==false){
                    if(k == j){
                        isBegin =true;
                        uu=true;
                    }
                }
                if(isBegin){
                    if(that.tableData[rowIndex][k]!=""){
                        break;
                    }
                    ++num;
                }
            }
            return num;
        }
    },
    mounted(){
    }
}
</script>

style:

<style lang="scss" scoped>
.HeBingTable{
    
}
</style>
深圳程序员打工崽
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
el-table动态合并行
AiGarry的博客
08-14 811
el-table动态合并行
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
Vue3 el-table 如何动态合并单元格的行与列
Mr_TianSDQ的博客
07-03 419
【代码】Vue3 el-table 如何动态合并单元格的行与列。
el-table表格动态合并行、合并行列及详解_el-table 合并行
2401_85124666的博客
06-12 3927
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
element table动态合并行、列
weixin_42115781的博客
06-21 536
以上面表格举例，表格需要以服务为主体显示，并且服务的数量不确定，表格数据是 资料对象集合，假设表格数据是按照服务名排序，如下 this.informationData = [ { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的', check: false }, { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的',..
vue element el-table合并列
Sun的专栏
12-14 358
【代码】vue element el-table合并列。
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
vue element-ui中table合计指定列求和实例
01-18
1. <el> 中 加:summary-method=”getSummaries” 2. <el> 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { ...
vue+element-ui动态生成多级表头的方法
10-18
在描述中提到的“vue+element”方法，主要涉及到Vue.js框架和Element-UI库的结合使用，特别是Element-UI中的`el-table`组件，这个组件支持自定义列、排序、筛选等功能，非常适合构建复杂的表格布局。 动态生成多级...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Vue实现数据表格合并列rowspan效果
12-29
背景 现实中会遇到很多需求，合并列，例如要显示一个名学生的各门课程成绩。 html实现 使用html实现是比较简单的，利用table标签的rowspan属性即可，代码如下： 姓名 课程数 课程名称 成绩 张三 3 语文 100 </tr
elementUI table表格动态合并的示例代码
10-17
主要介绍了elementUI table表格动态合并的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementUI table 自定义表头和行合并的实例代码
10-16
主要介绍了vue elementUI table 自定义表头和行合并的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ElementUI el-table 动态合并单元格
最新发布
hrcsdn13的博客
07-09 593
三、批次与表格数据是双向的，通过批次操作栏操作批次会引起表格数据变化，添加、删除、在表格中修改批次数量也会引起批次操作栏的变化。二、下方是对批次的校验；
实现el-table表格动态合并
liwei19950803的博客
03-15 574
如上图所示 我们要根据左侧三列进行每一列的相同名称合并，对每一行相同名称也进行一个合并，当时也在网上查找了一些案例 该图也是其中一个案例的数据，不过那是写死的需要一个一个去配置 如果数据过多就比较麻烦 ,下面是全部的代码 数据可以自己添加调试一下。在Vue项目中，我们经常使用的组件库就是element，但是根据一些夸张的需求我们可能要进行一些数据处理和组件的处理，对于el-table单元格的合并组件中也存在案例，但是那都是写死的 我们需要一个动态的合并。
el-table表格动态行/表头合并
boringmembership的博客
11-20 792
1、:span-method="spanMethod" // table上的默认事件绑定 spanMethod。2、数据加载完成后对数据处理下 ######唯一需要修改的地方，#########3、table合并列自动调用默认事件 spanMethod。1、给多行表头添加一个class，根据实际情况修改。2、对表头不同列进行合并 根据实际情况修改。
element中table表格动态合并行列
qq_42483955的博客
04-01 2818
思路：element中el-tabel有提供span-method方法合并行或者列，可以参考下element文档（https://element.eleme.cn/#/zh-CN/component/table）。所以我们想办法构造每条数据的row，col合并的数量就行。 table代码 <el-table ref="table" :data="list" style="width: 100%;" :span-method="objectSpanMeth
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深圳程序员打工崽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值