element table 中使用合并列解決 span-method 無法合并的問題

阿羅發布于2019-08-26 10:27 / 3132人閱讀

摘要：我們正常工作中需要的是類似這樣的列表。解決辦法先添加所需依賴在目錄中找到，復制到自己的項目中，然后引用，可以根據自己的需求自由更改。在所需模塊中引入中添加對應引入模塊表頭需要進行合并的中的，可以是多個中中名稱類型描述操作

官方實例

很顯然在工作過程中并不實用，我們需要的不僅僅是簡單的固定行合并，而是不定數目的合并，在工作中就不能正常使用了。我們正常工作中需要的是類似這樣的列表。

解決辦法

先添加所需依賴在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;
                    }
                })
            },

        }
    }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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系列所有組件開發過程...

everfly 2019-08-23 14:05 評論0 收藏0