效果圖:
一. 表格結(jié)合返回頂部
二. 局部loading
解決方法:
一 返回頂部
target綁定滾動dom的父元素類名就可以了.
1.如果你的表格是 固定表頭 的,那滾動dom的父元素類名就是 el-table__body-wrapper
<el-backtop target=".el-table__body-wrapper" :visibility-height="100" :bottom="75">
<div
style="
{
height: 100%;
background-color: #1989fa;
border-radius: 50%;
box-shadow: rgb(16 0 0 / 41%) 0px 12px 6px 0px;
text-align: center;
line-height: 40px;
color: #fff;
width: 100%;
}
"
>
<i class="el-icon-top"></i>
</div>
</el-backtop>
如圖:
2.如果你的表格不是固定表頭,表頭跟隨內(nèi)容一起滾動的,那滾動dom的父元素類名就是 el-table
如圖:
可能父元素類名會有差別,只要是滾動dom的父元素就可以了
二 局部loading
局部loading有時候會出現(xiàn)定位不準(zhǔn)情況,會定位到全屏loading
如圖:
可以看到首先是局部的loading,加載完后變成了全屏的loading
解決辦法就是給舉報loading的元素加一個相對定位就可以了
// js
const loading = this.$loading({
lock: true,
text: '拼命加載中......',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)',
target: document.querySelector('.about'),
})
// css
.about {
position: relative;
}
target綁定需要加載局部loading的dom文章來源：http://www.zghlxwxcb.cn/news/detail-640860.html
結(jié)束! 記錄一下平常遇到的小bug 下期再見 ! ! !文章來源地址http://www.zghlxwxcb.cn/news/detail-640860.html
到了這里，關(guān)于【vue+el-table+el-backtop】表格結(jié)合返回頂部使用,loading局部加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
