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)文章
vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無(wú)效問(wèn)題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無(wú)效問(wèn)題的解決方法,結(jié)合實(shí)例形式分析了@scroll監(jiān)聽滾動(dòng)事件無(wú)效問(wèn)題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vite是一款非常輕量級(jí)的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個(gè)開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗(yàn)是一個(gè)很常見(jiàn)的問(wèn)題，本文主要介紹了Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue.js數(shù)據(jù)綁定操作,結(jié)合實(shí)例形式詳細(xì)分析了vue.js數(shù)據(jù)綁定的各種常見(jiàn)操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-04-04
本文主要介紹了el-form-renderer使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了一個(gè)可復(fù)用的vue分頁(yè)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個(gè)ref對(duì)象，需要注意的是它只會(huì)解析對(duì)象的第一層屬性，語(yǔ)法直接傳入對(duì)象 toRefs，下面更多內(nèi)容的介紹需要的小伙伴可以參考一下2022-03-03
Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽路由變化的操作
在Vue3中,通過(guò)useRouter和useRoute可以方便地實(shí)現(xiàn)頁(yè)面導(dǎo)航和路由變化監(jiān)聽,useRouter允許進(jìn)行頁(yè)面跳轉(zhuǎn),而useRoute結(jié)合watch可以根據(jù)路由變化更新組件狀態(tài),這些功能為Vue3應(yīng)用增加了靈活性和響應(yīng)性,使得路由管理更加高效2024-09-09
vue將秒數(shù)轉(zhuǎn)成"時(shí)分秒"格式實(shí)例代碼
在項(xiàng)目中,請(qǐng)求后臺(tái)接口返回的值是秒,這篇文章主要給大家介紹了關(guān)于vue將秒數(shù)轉(zhuǎn)成"時(shí)分秒"格式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06