在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 求思路,vue封裝table組件,列需要適應(yīng)自適應(yīng)怎么處理好呢?

求思路,vue封裝table組件,列需要適應(yīng)自適應(yīng)怎么處理好呢?

最近需要對(duì)項(xiàng)目用到的table做統(tǒng)一修改,所以想把它封裝成公共組件,避免以后還有這種需求。

思路:

把列頭和數(shù)據(jù)表格內(nèi)容當(dāng)屬性傳到組件里面,列頭的td和數(shù)據(jù)行的td用對(duì)象包裝一下,因?yàn)樗麄冃枰嗟膶傩浴?/p>

問題:

現(xiàn)在主要問題是,因?yàn)樾枰m配移動(dòng)端,所以難免有一些列需要?jiǎng)討B(tài)控制(屏幕寬度改變)隱藏或顯示,之前一直用media來做的,通過寫多個(gè)media,慢慢的逐列隱藏或顯示,如果封裝到組件里面,改怎么實(shí)現(xiàn)呢?我打算傳遞一個(gè) width 過去,如果小于這個(gè)數(shù)值,表示隱藏,

顯示隱藏列用什么做好一點(diǎn)呢?js 監(jiān)聽 resize 么?這樣的話會(huì)不會(huì)影響性能呢?

有更好的辦法么?

回答
編輯回答
枕頭人

我在VUE上沒有做過table組件,但在Angular上做過.不過我想道理和邏輯是想通的.
我在做隱藏列和顯示列這種操作時(shí),為了保證效率,我采用的方式是動(dòng)態(tài)生成style樣式表,樣式表會(huì)包括沒一列的樣式.這樣在每次改變的時(shí)候只會(huì)修改對(duì)應(yīng)列的樣式,然后由瀏覽器統(tǒng)一渲染.不需要做什么JS對(duì)頁面DOM的操作.

希望能對(duì)你有幫助.

2017年10月17日 01:03
編輯回答
伴謊

推薦使用element-ui,里面有一個(gè)柵格系統(tǒng),有些像bootstrap,而且如果你不想使用element-ui的其它組件,是可以按需引入的,不用擔(dān)心文件過大。

可以去了解了解:http://element-cn.eleme.io/2....

2017年11月22日 13:03