資訊專欄INFORMATION COLUMN
摘要：在使用自定義組件內(nèi)容過程之中我們絕大多數(shù)情況下都是通過預(yù)先寫好不同的模板，再通過傳入不同的值來渲染不同的模板。
在使用vue自定義組件內(nèi)容過程之中,我們絕大多數(shù)情況下都是通過預(yù)先寫好不同的html模板，再通過props傳入不同的值來渲染不同的模板。例如我們需要實現(xiàn)一個
這樣做法顯得代碼過多，而且有時候我們需要真的JavaScript完全編程能力,即通過js代碼生成html結(jié)構(gòu)，再插入到頁面之中。實現(xiàn)這樣要求我們需要了解render函數(shù)。首先我們先了解三點
render方法的實質(zhì)就是生成template模板；
通過調(diào)用一個方法來生成，而這個方法是通過render方法的參數(shù)傳遞給它的；
這個方法有三個參數(shù)，分別提供標簽名，標簽相關(guān)屬性，標簽內(nèi)部的html內(nèi)容
下面通過一個element ui自定義表格表頭內(nèi)容的功能來展示render函數(shù)使用。
頁面代碼部分：
{{scope.row.timeSlice}}
js部分：使用render函數(shù)
//自定義列標題內(nèi)容
renderHeader(h, { column, $index },index){
return h("span", {}, [
h("span", {}, "時間片段"),
h("el-popover", { props: { placement: "top-start", width: "200", trigger: "hover", content: "領(lǐng)先/落后品類=單店平均單量-該品類城市店均單量" }}, [
h("i", { slot: "reference", class:"el-icon-question"}, "")
])
])
},
實現(xiàn)效果：
可以看到第一個函數(shù)參數(shù)即 標簽名，第二個為屬性名組成的對象，第三個參數(shù)代表值，如果值依然包含html標簽，我們可以使用數(shù)組來定義。以上就是本文全部內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/113684.html
摘要：在使用自定義組件內(nèi)容過程之中我們絕大多數(shù)情況下都是通過預(yù)先寫好不同的模板，再通過傳入不同的值來渲染不同的模板。 在使用vue自定義組件內(nèi)容過程之中,我們絕大多數(shù)情況下都是通過預(yù)先寫好不同的html模板，再通過props傳入不同的值來渲染不同的模板。例如我們需要實現(xiàn)一個組件。傳入不同的size，標題顯示不同的字號大小，我們可能這樣去實現(xiàn)這個組件： 這樣做...
摘要：在使用自定義組件內(nèi)容過程之中我們絕大多數(shù)情況下都是通過預(yù)先寫好不同的模板，再通過傳入不同的值來渲染不同的模板。 在使用vue自定義組件內(nèi)容過程之中,我們絕大多數(shù)情況下都是通過預(yù)先寫好不同的html模板，再通過props傳入不同的值來渲染不同的模板。例如我們需要實現(xiàn)一個組件。傳入不同的size，標題顯示不同的字號大小，我們可能這樣去實現(xiàn)這個組件： 這樣做...
摘要：無效方案根據(jù)交易所小時成交量占比和實時價格加權(quán)計算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...
摘要：無效方案根據(jù)交易所小時成交量占比和實時價格加權(quán)計算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...
閱讀 3470·2021-11-15 11:39
閱讀 1678·2021-09-22 10:02
閱讀 1363·2021-08-27 16:24
閱讀 3668·2019-08-30 15:52
閱讀 3476·2019-08-29 16:20
閱讀 872·2019-08-28 18:12
閱讀 605·2019-08-26 18:27
閱讀 768·2019-08-26 13:32
