Vue 自适应高度表格

Vue 自定义指令

你可能会好奇 v-adaptive 是在哪里来的？它是自定义的指令，设置表格高度需要对普通 DOM 元素进行底层操作。Vue 除了核心功能默认内置的指令 (v-model 和 v-show)，也允许注册自定义指令，相关 Api 可以查看官方文档。

v-adaptive

新建包名src/directive/el-table，创建 adaptive.js 。页面缩放的监听是使用的 element-ui 中的 resize-event，将 addResizeListener 和 removeResizeListener 引入进来。自定义指令要用到的钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

unbind：只调用一次，指令与元素解绑时调用。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

adaptive.js代码

复制代码

import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'

const doResize = async(el, binding, vnode) => {
  const { componentInstance: $table } = await vnode

  const { value } = binding

  if (!$table.height) {
    throw new Error(`el-$table must set the height. Such as height='100px'`)
  }
  const bottomOffset = (value && value.bottomOffset) || 30

  if (!$table) return

  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  $table.layout.setHeight(height)
  $table.doLayout()
}

export default {
  bind(el, binding, vnode) {
    el.resizeListener = async() => {
      await doResize(el, binding, vnode)
    }
    addResizeListener(el, el.resizeListener)
    addResizeListener(window.document.body, el.resizeListener)
  },
  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  async componentUpdated(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  unbind(el) {
    removeResizeListener(el, el.resizeListener)
  }
}

接下来，需要将写好的逻辑绑定到 Vue 中，在同一目录下新建 index.js：

复制代码

import adaptive from './adaptive'

const install = function(Vue) {     
    // 绑定v-adaptive指令
    Vue.directive('adaptive', adaptive)
}

if (window.Vue) {
    window['adaptive'] = adaptive  
    // eslint-disable-next-line no-undef 
    Vue.use(install)
}

adaptive.install = install

export default adaptive

全局使用main.js

复制代码

import directive from './directive' // directive
Vue.use(directive)