成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

element table 中使用合并列 解決 span-method 無(wú)法合并的問(wèn)題

阿羅 / 3141人閱讀

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

官方實(shí)例

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

解決辦法

先添加所需依賴在src/components目錄中找到lb-table，復(fù)制到自己的項(xiàng)目中，然后引用，可以根據(jù)自己的需求自由更改。
1、在所需模塊中引入 @/assets/lb-table/lb-table
2、components 中添加對(duì)應(yīng)引入模塊
3、column 表頭
4、merge 需要進(jìn)行合并的column中的prop，可以是多個(gè)

//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;
                    }
                })
            },

        }
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106185.html

相關(guān)文章

  • element-ui table表格動(dòng)態(tài)列合并

    摘要：前言的時(shí)候沒(méi)有表格合并的方法，這當(dāng)時(shí)做表格合并的功能時(shí)候，非常頭疼。開(kāi)始官方已經(jīng)支持表格合并的方法，那怎么做到表格動(dòng)態(tài)合并呢，還是直接看代碼吧。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表，第二個(gè)元素代表。 前言 element-ui 1.0的時(shí)候沒(méi)有表格合并的方法，這當(dāng)時(shí)做表格合并的功能時(shí)候，非常頭疼。2.0開(kāi)始官方已經(jīng)支持表格合并的方法，那怎么做到表格動(dòng)態(tài)合并呢，還是直接看...

    isLishude 評(píng)論0 收藏0

  • Element表格合并

    摘要：注意在合并第一行后需要合并第二行時(shí)需要判斷要合并的第二行的第一行值是不是一樣在這里我的處理方式是第二行的值加上第一行希望寫的對(duì)大家有用如果我寫的沒(méi)看明白的可以聯(lián)系我 var mergeIndex = 0;var hasMerge = false;var mergeIndex1 = 0;var hasMerge1 = false;//方法的全局變量//官網(wǎng)給我們提供了span-metho...

    yy13818512006 評(píng)論0 收藏0

  • vue elementUI table 自定義表頭和行合并

    摘要：最近項(xiàng)目中做表格比較多，對(duì)表格的使用，只需要傳遞進(jìn)去數(shù)據(jù)，然后寫死表頭即可渲染。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表，第二個(gè)元素代表。也可以返回一個(gè)鍵名為和的對(duì)象。 最近項(xiàng)目中做表格比較多，對(duì)element表格的使用，只需要傳遞進(jìn)去數(shù)據(jù)，然后寫死表頭即可渲染。 但現(xiàn)實(shí)中應(yīng)用中，如果寫死表頭，并且每個(gè)組件中寫自己的表格，不僅浪費(fèi)時(shí)間而且消耗性能。這個(gè)時(shí)候需要?jiǎng)討B(tài)渲染表頭。...

    funnyZhang 評(píng)論0 收藏0

  • uniapp table 組件

    摘要：最近在搗鼓項(xiàng)目，恰好用到組件，之前寫了個(gè)，后面一直都想寫一個(gè)像樣的，可以分享給別人用的組件。自己的水平一般，開(kāi)發(fā)出來(lái)的組件可能代碼不咋地，還望路過(guò)大神斧正。 uniapp是2019年非常的火爆的一個(gè)Dcloud開(kāi)發(fā)跨平臺(tái)前端工具，支持ios android wap，小程序，除了android有點(diǎn)卡外，其他暫時(shí)沒(méi)有發(fā)現(xiàn)什么瑕疵。 最近在搗鼓uniapp項(xiàng)目，恰好用到table組件，之前...

    Vultr 評(píng)論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開(kāi)發(fā)過(guò)程中遇到的問(wèn)題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開(kāi)發(fā)過(guò)程...

    soasme 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<