解決ele ui 表格表頭太長(zhǎng)問(wèn)題的實(shí)現(xiàn)
設(shè)計(jì)圖是這樣:
可是做出來(lái)是這樣:
出現(xiàn)了一行連著。。要知道工作上總有些ui沒(méi)事做喜歡指指點(diǎn)點(diǎn)。
后來(lái)翻查官方手冊(cè)發(fā)現(xiàn)了這個(gè)參數(shù):
附上網(wǎng)址:https://element.eleme.cn/#/zh-CN/component/table
首先,我們要知道h是vue封裝的一個(gè)方法。叫$createelement,大意是創(chuàng)建一個(gè)節(jié)點(diǎn)(猜的,,沒(méi)辦法英語(yǔ)一級(jí)都沒(méi)考過(guò).),然后這方法返回一個(gè)column和index,column其實(shí)就是這一格子里面的東西。我們來(lái)打印看一下。
現(xiàn)在我的動(dòng)態(tài)表頭里面添加這個(gè)方法:
打印column出來(lái)是這個(gè)格子里面的所有屬性。:
接著我們?yōu)榱藢?shí)現(xiàn)設(shè)計(jì)圖。要這樣寫方法:
細(xì)心的人會(huì)發(fā)現(xiàn)我的這表頭里面多了一個(gè)|的符號(hào),其實(shí)是為了這方法用的
h是調(diào)用createelement這個(gè)方法,傳入這是一個(gè)div,接著樣式,最后利用split去分割這個(gè)字符串。添加一個(gè)div進(jìn)行分割。樣式如下:
last,成雛形了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05vue3之Suspense加載異步數(shù)據(jù)的使用
本文主要介紹了vue3之Suspense加載異步數(shù)據(jù)的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02vue 開(kāi)發(fā)一個(gè)按鈕組件的示例代碼
本篇文章主要介紹了vue 開(kāi)發(fā)一個(gè)按鈕組件的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點(diǎn)討論?git?提交規(guī)范,結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟
這篇文章主要介紹了Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟,本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08element-ui之解決select無(wú)法回顯的問(wèn)題
這篇文章主要介紹了element-ui之解決select無(wú)法回顯的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04