Vue3 自定义指令让元素自适应高度，el-table在可视区域内滚起来

news2024/11/17 7:32:30

我始终坚持，前端开发不能满足于实现功能，而是需要提供优秀的交互与用户体验。即使没有产品没有UI的小项目，也可以自己控制出品质量，做到小而美。所以前端们不仅仅需要了解框架如何用，还要学习一些设计、交互、体验的知识，在一堆雷同的产品中脱颖而出。

哦，扯远了，因为今天想记录的这个功能是一个小小的体验提升，有感而发了。

表格行数较多时会让页面产生滚动条，用户滚动页面的话，上面的搜索条件或者其它内容被卷上去了看不到，不方便对照数据。所以用户的需求是只让表格滚动，其他元素都不要滚。

在这里插入图片描述

el-table滚动条

当el-table 表格所需的高度大于最大高度max-height或者高度height，则会显示一个滚动条。所以我们只需要给el-table固定一个高度，让页面整个高度不要超过窗口高度，就不会把其他元素卷走了。

具体实现

为了表格页面统一，让页码组件停留在页面底部，我们选择设置height，而不是max-height。所以现在的问题就是计算出height的值。

我们可以得到这三个值

窗口高度 pageHeight = window.innerHeight
el-table距离窗口顶部偏移量 top = el.offsetTop
底部预留的高度 bottom（这个值是自己设置的）

表格的高度 = pageHeight - top - bottom

第一个基础版本

OK，可以开始写我们的指令了

import { DirectiveBinding } from 'vue'

export default {
  mounted: (el: HTMLElement, binding: DirectiveBinding) => {  
    setHeight(el, binding)   
  },
}

// set el-table height
function setHeight(el: HTMLElement, binding: DirectiveBinding) {
  const top = el.offsetTop
  const bottom = binding?.value?.bottom || 64
  const pageHeight = window.innerHeight

  el.style.height = pageHeight - top - bottom + 'px'
}

然后加到el-table上

<el-table
      :data="tableData"     
      ref="multipleTable"
      v-adaptive
    >

刷新页面，表格高度非常合适，页面不滚了。是不是很简单！

考虑页面缩放

但是如果用户缩放页面，表格高度并不会自动变化，页面的滚动条又出来了。。。看来我们的指令还是不够完善，接下来加入window resize事件

通过window.addEventListener，在表格挂载完成后加入resize事件。

为了让表格在卸载后，及时销毁resize监听事件removeEventListener，事件通知对象listener不能是一个匿名函数。所以把listener挂在el上，因为HTMLElement类型上没有我们定义的listenenr函数，所以此处扩展了一下类型，这样在使用ts时不会爆红。

import { DirectiveBinding } from 'vue'

interface ExHTMLElement extends HTMLElement {
  resizeListener: EventListener
}

export default {
  mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {
    el.resizeListener = () => {
      setHeight(el, binding)
    }
    setHeight(el, binding)
    window.addEventListener('resize', el.resizeListener)
  },
  unmounted(el: ExHTMLElement) {
    window.removeEventListener('resize', el.resizeListener)
  }
}

// set el-table height
function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
  const top = el.offsetTop
  const bottom = binding?.value?.bottom || 64
  const pageHeight = window.innerHeight

  el.style.height = pageHeight - top - bottom + 'px'
}

现在再刷新页面，无论怎么缩放窗口，表格都可以自适应高度了。

页面其他元素的影响

问题又来了，页面上搜索表单是可以展开收起的，当我展开更多表单搜索时，表格高度没变，页面又可以滚了。所以再加一个钩子 update，完美解决。

// 在绑定元素的父组件

// 及他自己的所有子节点都更新后调用

updated(el, binding, vnode, prevVnode) {},

updated(el: ExHTMLElement, binding: DirectiveBinding) {
    setHeight(el, binding)
}

至此，已经满足我的项目使用了。

刚才又想到普通DIV元素也可以用这个指令，稍微修改了下更通用。

// set el-table height
function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
  ...
  el.style.height = pageHeight - top - bottom + 'px'
  el.style.overflowY = 'auto'  // 新增加
}