el-table自适应高度指令

v-el-table-auto-height 表格自动高度

原理：监听浏览器窗体变化、vue update渲染，取容器顶部和整个窗体高度计算容器高度

动态计算el-table的高度，使其底部与页面底部距离保持在一定的数值，包括：初始化动态计算、窗口变化动态计算、宽度变化动态计算（宽度变化可能导致一些元素折行）

  • 参数说明：v-el-table-auto-height.noPager:demo="0"
    • .noPager：无分页器时，默认分页器高度28px
    • :demo：自定义容器时的选择器，cless不写点“.”，id要写井号“#”
    • ="0"，自定义底部距离，默认底部距离12px

stackblitz

演示

使用方法

// 在main.js引入
import elTableAutoHeight from '@/directive/el-table-auto-height/el-table-auto-height
Vue.use(elTableAutoHeight)

<!-- 在表格中使用，默认距离底部12px，默认分页器高度28px已扣除 -->
<el-table
  v-el-table-auto-height
  :data="dataList"
>
  <el-table-column prop="demo" label="demo" />
</el-table>
<!-- 分页器 -->
<div class="block" style="float: right">
  <el-pagination />
</div>


<!-- 自定义底部距离，设置0也存在扣除28px分页器高度 -->
<el-table
  v-el-table-auto-height="0"
  :data="dataList"
>
  <el-table-column prop="demo" label="demo" />
</el-table>


<!-- 自定义选择器，由于vue语法问题，类选择器不写. id选择器需要写# -->
<!-- 没有分页器时加上.noPager -->
<div class="demo" v-el-table-auto-height.noPager:demo></div>
<div id="demo" v-el-table-auto-height.noPager:#demo></div>

源码


// 过渡动画
const TRANSITION_DURATION = '300ms'
// 指令内部变量命名空间
const NAMESPACES = '_elTableAutoHeight_namespaces'

/**
 * el-table自动高度
 * @param Vue
 */
const install = (Vue) => {
  Vue.directive('el-table-auto-height', {
    bind(el, binding, node) {
      // 指令的局限性导致要打破数据单项传递的规则
      // 删除代理
      delete node.componentInstance.$props.height
      // 重新设置代理
      Vue.util.defineReactive(node.componentInstance, 'height')

      init(el, binding, node)
      doWork(el, binding, node)
    },
    update(el, binding, node) {
      // 检测机制优化 TODO
      if (getContext(el, binding, node).setTimout) {
        clearTimeout(getContext(el, binding, node).setTimout)
      }
      getContext(el, binding, node).setTimout = setTimeout(() => {
        doWork(el, binding, node, false)
      }, 100)
    },
    unbind(el, binding, node) {
      if (!node) {
        return
      }
      if (getContext(el, binding, node).setTimout) {
        clearTimeout(getContext(el, binding, node).setTimout)
      }
      delete node.context[NAMESPACES][getContextKey(el, binding, node)]
    }
  })
}

const init = (el, binding, node) => {
  if (!node.context[NAMESPACES]) {
    node.context[NAMESPACES] = {}
  }
  if (getContext(el, binding, node)) {
    return
  }
  node.context[NAMESPACES][getContextKey(el, binding, node)] = {
    id: Math.random().toString(36).slice(-8),
    // 防抖器
    setTimout: null,
    container: null,
    bottom: null,
    node: node,
    el: el,
    binding: binding,
    tableBody: null
  }
}

const getContext = (el, binding, node) => {
  const key = getContextKey(el, binding, node)
  return node.context[NAMESPACES][key]
}

const getContextKey = (el, binding, node) => {
  return `${node.tag}-${el.id}-${el.class}-${binding.arg}`
}

/**
 * 处理容器、参数
 * @param el
 * @param binding
 * @param node
 * @param observeFlag 是否创建监听
 */
const doWork = (el, binding, node, observeFlag = true) => {
  const container = binding.arg ? el.querySelector(getSelector(binding)) : el

  // 默认距离底部12px
  let bottom = binding.value
  if (!bottom && bottom !== 0) {
    bottom = 12
  }

  // 分页器高度
  if (!binding.modifiers.noPager) {
    bottom += 28
  }
  const context = getContext(el, binding, node)
  context.bottom = bottom
  context.container = container
  context.tableBody = container.querySelector('.el-table__body-wrapper')

  setHeight(context)
  if (observeFlag) {
    observeContainerChange(context)
  }
}

/**
 * 监听容器变化，由于el-table初始化渲染会导致宽度变化，所以初始化时会被调用多次
 * @param context
 */
const observeContainerChange = (context) => {
  // 宽度变化监听由于el-table内部计算会导致死循环，改为vue渲染变化监听 TODO
  // const config = { attributes: true, childList: true, subtree: true, attributeFilter: ['width'] }
  // const callback = (mutationsList, observer) => {
  //   setHeight(container, bottom, node, elTableFlag)
  // }
  // const observer = new MutationObserver(callback)
  // observer.observe(container, config)

  // 窗口变化监听
  window.addEventListener('resize', () => {
    setHeight(context)
  })
}

/**
 * 设置高度
 * @param context
 */
const setHeight = (context) => {
  const top = context.container.getBoundingClientRect().top
  const innerHeight = window.innerHeight
  let height = innerHeight - top - context.bottom

  const body = context.container.querySelector('.el-table__body-wrapper')
  if (body) {
    context.container.style.transitionDuration = TRANSITION_DURATION
    const footer = context.container.querySelector('.el-table__footer-wrapper')
    if (footer) {
      height = height - Number(footer.offsetHeight)
    }
    context.node.componentInstance.height = height
    // 调用内部计算方法
    context.node.componentInstance.layout.setHeight(height)
  } else {
    context.container.style.height = `${height}px`
    context.container.style.overflowY = 'auto'
    context.container.style.transitionDuration = TRANSITION_DURATION
  }
}

/**
 * 获取当前选择器
 * @param binding
 * @returns {string|string}
 */
const getSelector = (binding) => {
  let containerSelector = binding.arg
  if (containerSelector && containerSelector[0] !== '#' && containerSelector[0] !== '.') {
    containerSelector = '.' + containerSelector
  }
  return containerSelector || 'default'
}

export default install