element-ui中頁面縮放時table表格內(nèi)容錯位的解決
更新時間：2022年08月01日 10:33:03 作者：陪著月亮
這篇文章主要介紹了element-ui中頁面縮放時table表格內(nèi)容錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui 頁面縮放時table表格內(nèi)容錯位
當(dāng)table內(nèi)容較多的時候， 橫向拉動瀏覽器界面。最后一列自定義按鈕，就會出現(xiàn)上下錯誤的情況。
解決辦法：
this.$refs.table.doLayout();
table增加ref屬性。
mounted() {
window.addEventListener('resize', this.handleResize);
}
methods: {
handleResize() {
this.$nextTick(()=> {
this.$refs.table.doLayout();
});
}
}
destroyed() {
window.removeEventListener("resize", this.handleResize);
}
element-ui表格優(yōu)化--顯示錯位問題
ElementUI el-table 動態(tài)顯示表格的時候，會發(fā)生顯示錯位的情況，拖拽一下又恢復(fù)正常了
之前試試了各種css都沒有效果
/* 表格錯位的問題 */
.working-hours-table {
/deep/.el-table__fixed-body-wrapper{
top:29px !important;
height: calc(100% - 29px) !important;
}
/deep/.el-table__fixed{
height: 100% !important;
}
/deep/ .el-table__fixed-right{
height: 100% !important;
}
}解決辦法：
watch: {
// tableData是el-table綁定的數(shù)據(jù)
tableData: {
// 解決表格顯示錯位問題
handler () {
this.$nextTick(() => {
// tableRef是el-table綁定的ref屬性值
this.$refs.multipleTable.doLayout() // 對 Table 進(jìn)行重新布局
})
},
deep: true
}
},以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- element-ui復(fù)雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序詳解
- vue element-ui實現(xiàn)el-table表格多選以及回顯方式
- 關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
- vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
- 關(guān)于Element-ui中Table表格無法顯示的問題及解決
- 解決element-ui的table表格控件表頭與內(nèi)容列不對齊問題
- 關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決
- Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
- Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
相關(guān)文章
本篇文章主要介紹了淺談Vue 初始化性能優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實現(xiàn)elementUI多級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
關(guān)于配置babel-plugin-import報錯的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報錯的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
這篇文章主要為大家介紹了Vue之表單事件的數(shù)據(jù)綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡單來說，就是將單獨(dú)功能的js代碼抽離出來，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧2023-06-06
這篇文章主要介紹了Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
移動端底部導(dǎo)航固定配合vue-router實現(xiàn)組件切換功能
經(jīng)常遇到這樣的需求，移動端中的導(dǎo)航并不是在頂部也不是在底部，而是在最底部且是固定的，當(dāng)我們點(diǎn)擊該導(dǎo)航項時會切換到對應(yīng)的組件。這篇文章主要介紹了移動端底部導(dǎo)航固定配合vue-router實現(xiàn)組件切換功能,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08