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

資訊專欄INFORMATION COLUMN

element ui table render-header自定義表頭信息使用

zone / 3432人閱讀

摘要：在使用自定義組件內(nèi)容過(guò)程之中我們絕大多數(shù)情況下都是通過(guò)預(yù)先寫好不同的模板，再通過(guò)傳入不同的值來(lái)渲染不同的模板。

在使用vue自定義組件內(nèi)容過(guò)程之中,我們絕大多數(shù)情況下都是通過(guò)預(yù)先寫好不同的html模板，再通過(guò)props傳入不同的值來(lái)渲染不同的模板。例如我們需要實(shí)現(xiàn)一個(gè)組件。傳入不同的size，標(biāo)題顯示不同的字號(hào)大小，我們可能這樣去實(shí)現(xiàn)這個(gè)組件：

這樣做法顯得代碼過(guò)多，而且有時(shí)候我們需要真的JavaScript完全編程能力,即通過(guò)js代碼生成html結(jié)構(gòu)，再插入到頁(yè)面之中。實(shí)現(xiàn)這樣要求我們需要了解render函數(shù)。首先我們先了解三點(diǎn)

render方法的實(shí)質(zhì)就是生成template模板；

通過(guò)調(diào)用一個(gè)方法來(lái)生成，而這個(gè)方法是通過(guò)render方法的參數(shù)傳遞給它的；

這個(gè)方法有三個(gè)參數(shù)，分別提供標(biāo)簽名，標(biāo)簽相關(guān)屬性，標(biāo)簽內(nèi)部的html內(nèi)容

下面通過(guò)一個(gè)element ui自定義表格表頭內(nèi)容的功能來(lái)展示render函數(shù)使用。
頁(yè)面代碼部分：

js部分：使用render函數(shù)

 //自定義列標(biāo)題內(nèi)容
    renderHeader(h, { column, $index },index){
       return h("span", {}, [
        h("span", {}, "時(shí)間片段"),
        h("el-popover", { props: { placement: "top-start", width: "200", trigger: "hover", content: "領(lǐng)先/落后品類=單店平均單量-該品類城市店均單量" }}, [
           h("i", { slot: "reference", class:"el-icon-question"}, "")
          ])
       ])

    },

實(shí)現(xiàn)效果：

可以看到第一個(gè)函數(shù)參數(shù)即 標(biāo)簽名，第二個(gè)為屬性名組成的對(duì)象，第三個(gè)參數(shù)代表值，如果值依然包含html標(biāo)簽，我們可以使用數(shù)組來(lái)定義。以上就是本文全部?jī)?nèi)容。

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

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

相關(guān)文章

  • element ui table render-header自定義表頭信息使用

    摘要：在使用自定義組件內(nèi)容過(guò)程之中我們絕大多數(shù)情況下都是通過(guò)預(yù)先寫好不同的模板，再通過(guò)傳入不同的值來(lái)渲染不同的模板。 在使用vue自定義組件內(nèi)容過(guò)程之中,我們絕大多數(shù)情況下都是通過(guò)預(yù)先寫好不同的html模板，再通過(guò)props傳入不同的值來(lái)渲染不同的模板。例如我們需要實(shí)現(xiàn)一個(gè)組件。傳入不同的size，標(biāo)題顯示不同的字號(hào)大小，我們可能這樣去實(shí)現(xiàn)這個(gè)組件： 這樣做...

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

  • element ui table render-header自定義表頭信息使用

    摘要：在使用自定義組件內(nèi)容過(guò)程之中我們絕大多數(shù)情況下都是通過(guò)預(yù)先寫好不同的模板，再通過(guò)傳入不同的值來(lái)渲染不同的模板。 在使用vue自定義組件內(nèi)容過(guò)程之中,我們絕大多數(shù)情況下都是通過(guò)預(yù)先寫好不同的html模板，再通過(guò)props傳入不同的值來(lái)渲染不同的模板。例如我們需要實(shí)現(xiàn)一個(gè)組件。傳入不同的size，標(biāo)題顯示不同的字號(hào)大小，我們可能這樣去實(shí)現(xiàn)這個(gè)組件： 這樣做...

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

  • 步步向前之Element-UI

    摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...

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

  • 步步向前之Element-UI

    摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...

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

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

0條評(píng)論

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