快捷導(dǎo)航

Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例

更新時(shí)間：2024年06月13日 10:41:21 作者：cnsv雨

這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

效果圖

新建指令

Vue.directive('height', {
  inserted(el, _binding, vnode) {
    const paginationRef = vnode.context.$refs.paginationRef
    const calculateHeight = () => {
      const windowHeight = window.innerHeight
      const topOffset = el.getBoundingClientRect().top
      const otherElementsHeight = 40 
      let paginationHeight = 0
      if (paginationRef && paginationRef.totalPage) {
        paginationHeight = 55
      }
      el.style.height = `${
        windowHeight - topOffset - otherElementsHeight - paginationHeight
      }px`
    }
    const debouncedCalculateHeight = _.debounce(calculateHeight, 500)
    debouncedCalculateHeight()
    window.addEventListener('resize', debouncedCalculateHeight)
    el.__vueHeightDirective__ = debouncedCalculateHeight
  },
  unbind(el) {
    window.removeEventListener('resize', el.__vueHeightDirective__)
    delete el.__vueHeightDirective__
  }
})

頁面使用

1：el-table外層嵌套div，加指令v-height
2：el-table設(shè)置height=100%

<div v-height>
   	<el-table height="100%">
		</el-table-column>
	</el-table>
</div>

注意，重點(diǎn)！

1：指令這一行 const paginationRef = vnode.context.$refs.paginationRef
用來判斷是否顯示分頁器，所以如果有分頁器需要在分頁器增加ref，如下：

<el-pagination ref="paginationRef">
</el-pagination>

2：至于這一行 paginationRef.totalPage，是分頁器的顯示與否，比如：

<el-pagination v-if="total > 0" ref="paginationRef">
</el-pagination>

至于我這里為什么叫totalPage，因?yàn)檫@個(gè)是經(jīng)過二次封裝的，沒封裝的就直接叫total。
同理指令paginationRef.totalPage需要修改為paginationRef.total

3：有人問了paginationRef.total這個(gè)total是怎么來的，怎么命名的；
這個(gè)是官網(wǎng)的文檔的組件，paginationRef這里就會獲取你分頁器的props。
比如：

這個(gè)total就指的elementUI的分頁組件的props。一般因?yàn)槭怯脕砼袛鄑otal數(shù)量是不是大于0顯示；
大于0就顯示了分頁器，所以。。。懂了吧

4：又有人問了，為什么指令不直接寫在el-table里。這個(gè)你可以自己去試試，會發(fā)現(xiàn)滾動(dòng)不了。
至于原因：因?yàn)檫@個(gè)指令設(shè)置的是單獨(dú)style的height高度，你審查元素就會發(fā)現(xiàn)el-table傳參的height 他需要同步設(shè)置為他下級元素樣式el-table__body-wrapper的高度，所以并不是設(shè)置style為height的高度這么簡單。

5：代碼的_.debounce是什么。這里是用的lodash的防抖函數(shù)，自己寫一個(gè)防抖函數(shù)即可。

6：有的同學(xué)就要問了，那我直接封裝一個(gè)方法或者其他方法或者mixins來計(jì)算行不行
都可以，你想怎么用怎么用，mixins的話比如：

export default {
  data() {
    return {
      tableHeight: 0
    }
  },
  mounted() {
    this.calculateAndSetHeight()
  },
  methods: {
    calculateAndSetHeight() {
      if (this.$refs.tableRef) {
        const el = this.$refs.tableRef.$el
        const calculateHeight = () => {
          const windowHeight = window.innerHeight
          const topOffset = el.getBoundingClientRect().top
          const otherElementsHeight = 40
          let paginationHeight = 0
          const paginationRef = this.$refs.paginationRef
          if (paginationRef && paginationRef.totalPage) {
            paginationHeight = 55
          }
          this.tableHeight = `${
            windowHeight - topOffset - otherElementsHeight - paginationHeight
          }px`
        }
        const throttledCalculateHeight = _.debounce(calculateHeight, 500)
        throttledCalculateHeight()
        window.addEventListener('resize', throttledCalculateHeight)
        // 在組件銷毀時(shí)移除事件監(jiān)聽器
        this.$once('hook:destroyed', () => {
          window.removeEventListener('resize', throttledCalculateHeight)
        })
      }
    }
  }
}

頁面使用：

<el-table ref="tableRef" :height="tableHeight">

這樣就不用一個(gè)個(gè)標(biāo)簽像v-height div包起來了，但是ref和height就必要。
效果都是一樣的，自己看著來。

ps：至于為什么要寫這個(gè)功能，你能點(diǎn)進(jìn)來看說明就是公司有一些犟貨覺得滾下去太麻煩了?；蛘呤求w驗(yàn)不是很好的，數(shù)據(jù)太多屏幕太小總要滾下去。
另外其實(shí)后臺系統(tǒng)大部分用模板即可，有些模板自帶有這種功能。

到此這篇關(guān)于Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的文章就介紹到這了,更多相關(guān)Vue2 Element-ui表格自適應(yīng)高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: