动态

详情 返回 返回

el-table在使用fixed固定列,表格錯亂問題 - 动态 详情

image.png
發現表格在初始值的時候,顯示正常,滑動到底部時,左側表格與固定列表高度不對齊,根據網上嘗試很多方法,修改css都不管用。
經過觀察發現,在初次加載時是正常的,只有在滑動到接近底部位置,不對齊。

解決思路:封裝全局指令(通過監聽table滾動到底部事件),避免重複邏輯,進行doLayout操作:
image.png

                <el-table
                    ref="table"
                    v-scroll-bottom="tableScroll"
                    :data="data"
                   ...
                  >
...


        // table滾動到底部
        tableScroll() {
            this.$nextTick(() => {
                this.$refs.table?.doLayout()
            })
        }

在src\common\plugins\directives\index.js中自定義指令:

// el-table監聽滑動到底部
Vue.directive('scroll-bottom', {
  bind(el, binding) {
    const scrollWrap = el.querySelector('.el-table__body-wrapper')
    scrollWrap.addEventListener('scroll', function () {
      const sign = 30 // 距離底部閾值,寫大一點,可以根據你滑動的位置定義,因為沒到底部就出現錯亂
      const isBottom =
        this.scrollHeight - this.scrollTop - this.clientHeight <= sign
      if (isBottom) {
        binding.value() // 觸發回調
      }
    })
  }
})

當然記得在main.js中引入src\common\plugins\directives\index.js
// 自定義指令
import '@/common/plugins/directives/index.js'
問題解決

Add a new 评论

Some HTML is okay.