element table 中使用合并列解决 span-method 无法合并的问题

阿罗发布于2019-08-26 10:27 / 2783人阅读

摘要：我们正常工作中需要的是类似这样的列表。解决办法先添加所需依赖在目录中找到，复制到自己的项目中，然后引用，可以根据自己的需求自由更改。在所需模块中引入中添加对应引入模块表头需要进行合并的中的，可以是多个中中名称类型描述操作

官方实例

很显然在工作过程中并不实用，我们需要的不仅仅是简单的固定行合并，而是不定数目的合并，在工作中就不能正常使用了。我们正常工作中需要的是类似这样的列表。

解决办法

先添加所需依赖在src/components目录中找到lb-table，复制到自己的项目中，然后引用，可以根据自己的需求自由更改。
1、在所需模块中引入 @/assets/lb-table/lb-table
2、components 中添加对应引入模块
3、column 表头
4、merge 需要进行合并的column中的prop，可以是多个

//template 中


//script 中
import lbTable from "@/assets/lb-table/lb-table";
export default {
        name: "networkList",
        components:{
            lbTable
        },
        data(){
            return {
                column: [
                    {
                        prop: "cinema_name",
                        label: "名称",
                    },
                    {
                        prop: "device_model",
                        label: "类型",
                    },
                    {
                        prop: "collect_name",
                        label: "描述",
                        render: (h, scope) => {
                            if(scope.row.type===3){
                                return(
                                    
                                        
                                        { scope.row.collect_name }
                                    
                                )
                            }else{
                                return(
                                        
                                            
                                            { scope.row.collect_name }
                                        
                                    )

                            }

                        }
                    },
                    {
                        label: "操作",
                        prop: "cinema_name",
                        width:"120",
                        fixed:"right",
                        render:(h, scope)=>{
                            return(
                                
                                    {this.handleClick("contact",scope.row)}} type="text" size="small">
                                        xxxx
                                    
                                
                            )
                        }
                    }
                ],
                tableData: [],
            }
        },
        methods:{
            rowClassName ({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return "warning-row"
                } else if (rowIndex === 3) {
                    return "success-row"
                }
                return ""
            },
            onSubmit(){
                const that = this;
                getFaults().then(res =>{
                    console.log(res);
                    if(res.return_code===0){
                        that.tableData = res.data.data;
                    }
                })
            },

        }
    }

混合云私有云 cdnjs合并的问题 table合并最优合并问题的算法思想合并列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106185.html

element-ui table表格动态列合并

摘要：前言的时候没有表格合并的方法，这当时做表格合并的功能时候，非常头疼。开始官方已经支持表格合并的方法，那怎么做到表格动态合并呢，还是直接看代码吧。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。前言 element-ui 1.0的时候没有表格合并的方法，这当时做表格合并的功能时候，非常头疼。2.0开始官方已经支持表格合并的方法，那怎么做到表格动态合并呢，还是直接看...

isLishude 2019-08-23 10:35 评论0 收藏0
Element表格合并

摘要：注意在合并第一行后需要合并第二行时需要判断要合并的第二行的第一行值是不是一样在这里我的处理方式是第二行的值加上第一行希望写的对大家有用如果我写的没看明白的可以联系我 var mergeIndex = 0;var hasMerge = false;var mergeIndex1 = 0;var hasMerge1 = false;//方法的全局变量//官网给我们提供了span-metho...

yy13818512006 2019-08-26 13:52 评论0 收藏0
vue elementUI table 自定义表头和行合并

摘要：最近项目中做表格比较多，对表格的使用，只需要传递进去数据，然后写死表头即可渲染。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。也可以返回一个键名为和的对象。最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。...

funnyZhang 2019-08-26 13:53 评论0 收藏0
uniapp table 组件

摘要：最近在捣鼓项目，恰好用到组件，之前写了个，后面一直都想写一个像样的，可以分享给别人用的组件。自己的水平一般，开发出来的组件可能代码不咋地，还望路过大神斧正。 uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具，支持ios android wap，小程序，除了android有点卡外，其他暂时没有发现什么瑕疵。最近在捣鼓uniapp项目，恰好用到table组件，之前...

Vultr 2019-08-26 10:35 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

soasme 2019-08-02 16:07 评论0 收藏0