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