如圖所示，在固定頭和列后出現了幾個問題，查看原因后得知是表格下部出現滾動條導致的，所以我把左右固定列的高度減去滾動條的高度就可以解決這個問題
mounted () {
// this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45
const _this = this
var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-inner')
tableBodyInnerNodeList.forEach(item => {
this.$nextTick(() => {
item.style.maxHeight = (parseInt(item.style.maxHeight) - 13) + 'px'
})
})
window.addEventListener('resize', function () {
// _this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45
tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-inner')
tableBodyInnerNodeList.forEach(item => {
_this.$nextTick(() => {
item.style.maxHeight = (parseInt(item.style.maxHeight) - 13) + 'px'
})
})
})
}
注釋的代碼是專案用來防止頁面出現多條滾動條的，與上面的問題無關
需要注意：
- 抓取元素需要在mounted生命周期中，因為在該生命周期中dom才渲染完成，而在created中dom還未渲染
- onresize事件通過addEventListenner方式注冊，并且回呼函式中的this不在指向該vue組件而是指向window，所以需要提前 const _this = this
- 設定行內樣式的操作需要放在$nextTick中，否則獲取不到原有的max-height樣式，導致設定失敗
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/261396.html
標籤：其他