vue2,vue3自适应表格高度,自定义指令

vue2,vue3自适应表格高度,自定义指令

vu2：

main.js中引入相应文件夹
import '../src/directive/tableAdaptive'

tableAdaptive.js
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
import Vue from 'vue'
/**
 * 自适应表格高度
 * 使用：
 * <el-table height="100px" v-adaptive="{bottomOffset: 30}">...</el-table>
 * bottomOffset 代表距离底部的距离
 * bottomOffset: 30(default)   // 从这一页的底部到表格的高度.
 */
// 设置表格高度
const doResize = (el, binding, vnode) => {
  const { componentInstance: $table } = vnode
  // 获取调用传递过来的数据
  const { value } = binding
  // if (!$table.height) {
  if ($table.height === -1) {
    // 获取距底部距离（用于展示页码等信息）
    const bottomOffset = (value && value.bottomOffset) || 90
    if (!$table) return
    // 计算列表高度并设置
    const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
    $table.layout.setHeight(height)
    $table.doLayout()
  }
}

Vue.directive('tableAdaptive', {
  // 初始化设置
  bind(el, binding, vnode) {
    // 设置resize监听方法
    el.resizeListener = () => {
      doResize(el, binding, vnode)
    }
    // window.onresize = () => {
    //   console.log('onresize')
    // }
    // parameter 1 is must be "Element" type
    let domEl = document.getElementsByClassName('head-container')[0]
    if (domEl) {
      addResizeListener(domEl, el.resizeListener)
    }
    addResizeListener(window.document.body, el.resizeListener)
    // 绑定监听方法到addResizeListener
    // window.addEventListener('resize', el.resizeListener)
  },
  // 绑定默认高度
  inserted(el, binding, vnode) {
    doResize(el, binding, vnode)
  },
  // 销毁时设置
  unbind(el) {
    removeResizeListener(window.document.body, el.resizeListener)
    // 移除resize监听
    window.removeEventListener('resize', el.resizeListener)
  }
})

vue3:

main.js
import directives from './directives'
 app = createApp(App)
  app
    .use(directives)
    .mount(container ? container.querySelector('#app') : '#app')

npm install element-ui-plus --save

tableAdaptive.js
import { addResizeListener, removeResizeListener } from 'element-ui-plus/src/utils/resize-event'
/**
 * 自适应表格高度
 * 使用：
 * <el-table height="100px" v-adaptive="{bottomOffset: 30}">...</el-table>
 * bottomOffset 代表距离底部的距离
 * bottomOffset: 30(default)   // 从这一页的底部到表格的高度.
 */
export default {
  // 初始化设置
  beforeMount(el, binding, vnode) {
    const { value } = binding
    const bottomOffset = (value && value.bottomOffset) || 90
    // 计算列表高度并设置
    const height = window.innerHeight - bottomOffset
    el.style.height = height + 'px'
    // 设置resize监听方法
    el.resizeListener = () => {
      // 获取调用传递过来的数据
      const { value } = binding

      // 获取距底部距离（用于展示页码等信息）
      const bottomOffset = (value && value.bottomOffset) || 90

      // 计算列表高度并设置
      const height = window.innerHeight - bottomOffset
      el.style.height = height + 'px'
    }
    const domEl = document.getElementsByClassName('head-container')[0]
    if (domEl) {
      addResizeListener(domEl, el.resizeListener)
    }
    addResizeListener(window.document.body, el.resizeListener)
  },
  // 绑定默认高度
  mouned(el, binding, vnode) {
    // 获取调用传递过来的数据
    const { value } = binding
    // 获取距底部距离（用于展示页码等信息）
    const bottomOffset = (value && value.bottomOffset) || 90
    // 计算列表高度并设置
    const height = window.innerHeight - bottomOffset
    el.style.height = height + 'px'
  },
  // 销毁时设置
  unmounted(el) {
    removeResizeListener(window.document.body, el.resizeListener)
    // 移除resize监听
    window.removeEventListener('resize', el.resizeListener)
  }
}

vue3官网