資訊專欄INFORMATION COLUMN
摘要：在使用自定義組件內(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è)
這樣做法顯得代碼過(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è)面代碼部分：
{{scope.row.timeSlice}}
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/52835.html
摘要：在使用自定義組件內(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è)組件： 這樣做...
摘要：在使用自定義組件內(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è)組件： 這樣做...
摘要：無(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)固定表頭的...
摘要：無(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)固定表頭的...
閱讀 2674·2023-04-26 00:42
閱讀 2817·2021-09-24 10:34
閱讀 3835·2021-09-24 09:48
閱讀 4168·2021-09-03 10:28
閱讀 2589·2019-08-30 15:56
閱讀 2783·2019-08-30 15:55
閱讀 3276·2019-08-29 12:46
閱讀 2254·2019-08-28 17:52
