antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作
當(dāng)不給某列設(shè)置寬度時(shí)這一列的寬度等于: (表格寬度-有寬度列的寬度)/沒(méi)有固定寬度的列的數(shù)量
也就是沒(méi)有設(shè)置寬度的列會(huì)平分表格中余下的寬度
在antd 的表格中, 當(dāng)你不設(shè)置表格滾動(dòng), 并且你給每一列設(shè)置了固定寬度, 那么他們會(huì)按照設(shè)置寬度的比例瓜分表格的寬度
表格橫向滾動(dòng), 序號(hào), 權(quán)屬人左定位
antd 中的表格列固定是隱藏原列, 然后又在上面覆蓋新列實(shí)現(xiàn)的, 也就是說(shuō)白色部分實(shí)際是原列, 只不過(guò)是被隱藏了
這個(gè)表格中只有序號(hào)有固定寬度, 那么余下所有列平分表格剩余寬度, 被定為的權(quán)屬人的新列寬度是由內(nèi)容撐開的, 所有新列比原列短, 就出現(xiàn)了空缺
表格空缺
結(jié)論：
所有被定位的列一定要設(shè)置固定寬度。
補(bǔ)充知識(shí)：antd table 表格錯(cuò)位的問(wèn)題
當(dāng)遇到antdtable表格錯(cuò)位的時(shí)候，看文檔，文檔上說(shuō)的是，要設(shè)置每一列的寬度，但是已經(jīng)設(shè)置了，卻還是錯(cuò)位。后來(lái)經(jīng)過(guò)查找資料，發(fā)現(xiàn)最后一列就不用設(shè)置的話，就不會(huì)再錯(cuò)位，因?yàn)閍ntd會(huì)自己給最后一列分配寬度。
在這里還遇到一個(gè)問(wèn)題，就是當(dāng)我們給列設(shè)置的寬度不合理的話（一般情況是設(shè)置的寬度較小），也會(huì)錯(cuò)位。這個(gè)時(shí)候，只需要調(diào)整寬度就好
以上這篇antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場(chǎng)景和需求,watch?適合副作用操作,watchEffect適合簡(jiǎn)單的自動(dòng)副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過(guò)場(chǎng)景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
一文快速學(xué)會(huì)阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
冒泡就是事件開始是由最具體的元素接收,然后逐層向上級(jí)傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vuex的初探與實(shí)戰(zhàn)小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Element樹形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能
最近做的項(xiàng)目用到了全選全不選功能,于是就自己動(dòng)手寫了一個(gè),這篇文章主要給大家介紹了關(guān)于Element樹形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue項(xiàng)目中訪問(wèn)本地json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目中訪問(wèn)本地json數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過(guò)實(shí)例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址
這篇文章主要給大家介紹了關(guān)于vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02