欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文解決vue2 element el-table自適應(yīng)高度問題

 更新時間：2023年11月21日 10:44:28   作者：gua了個gua  
在寫公司后臺項目的時候遇到一個需求,要求表格頁面不能有滾動條,所以必須封裝一個公共方法來實現(xiàn)表格自適應(yīng)高度,本問小編給大家介紹了如何解決vue2 element el-table自適應(yīng)高度問題,需要的朋友可以參考下

解決element表格自適應(yīng)高度問題

在寫公司后臺項目的時候遇到一個需求，要求表格頁面不能有滾動條，所以必須封裝一個公共方法來實現(xiàn)表格自適應(yīng)高度

第一步 實現(xiàn)自定義指令去監(jiān)聽表格元素高度變化

我這邊使用封住思想 首先創(chuàng)建在obSize文件夾下創(chuàng)建index.js內(nèi)容如下

const map = new WeakMap()
// ob監(jiān)聽
const ob = new ResizeObserver((entries) => {
   for (const entry of entries) {
       // 處理元素對應(yīng)的回調(diào)
       const handler = map.get(entry.target)
       if (handler) {
           const box = entry.borderBoxSize[0]
           // 循環(huán)entry.target 累加offsetTop 從而得到距離頁面頂部距離
           let setTop = countTop(entry.target, 0)

           handler({
               width: box.inlineSize,
               height: box.blockSize,
               entry: entry,
               bodHeight: window.document.body.clientHeight,
               setTop: setTop,
               tableHeight: (window.document.body.clientHeight - setTop - 50 - box.inlineSize) > 0 ? '' : window.document.body.clientHeight - setTop - 72
           })
       }
   }
})

export function countTop(el, topn) {
   if (el.offsetParent) {
       return countTop(el.offsetParent, topn + el.offsetTop)
   } else {
       return topn
   }

}
export default {
   inserted(el, binding) {
       ob.observe(el)
       // 監(jiān)聽el元素尺度的變化
       map.set(el, binding.value)
   },
   unbind(el) {
       // 取消監(jiān)聽
       ob.unobserve(el)
   },
}

注冊vue指令在directive文件夾index.js文件中

import obSize from './obSize'
const install = function (Vue) {
  //這里可以放入多個自定義指令
  Vue.directive('ob-size', obSize)
}

if (window.Vue) {

  Vue.use(install); // eslint-disable-line
}

export default install

在main.js引入directive

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

第二步 封裝mixins

在mixins文件夾內(nèi)創(chuàng)建estimateTableHeight.js內(nèi)容如下 70 代表距離頁面底部的高度

import { countTop } from '@/directive/obSize'
export default {
    data() {
        return {
            tableHeight: 0,
        }
    },
    methods: {
        handleSizeChange(e) {
            this.tableHeight = e.tableHeight;
        },
    },
    // 監(jiān)聽showSearch
    watch: {
        showSearch(val) {
            // 獲取element table元素
            const dome = document.getElementsByClassName('el-table');
            let setTop = countTop(dome, 0)
            this.tableHeight = window.document.body.clientHeight - setTop - 70
        },
    },
    mounted() {
    //監(jiān)聽頁面尺寸變化
        window.addEventListener('resize', () => {
            const dome = document.getElementsByClassName('el-table');
            let setTop = countTop(dome, 0)
            this.tableHeight = window.document.body.clientHeight - setTop - 70
        });
    },
}

第三步 在頁面引入

引入 import estimateTableHeight from "@/mixins/estimateTableHeight";

export default { mixins: [estimateTableHeight], }

在el-table上加入 v-ob-size="handleSizeChange" :height="tableHeight"

<el-table
        v-ob-size="handleSizeChange"
        :height="tableHeight"
        v-loading="loading"
        :data="List"
>

大功告成！

以上就是一文解決vue2 element el-table自適應(yīng)高度問題的詳細內(nèi)容，更多關(guān)于vue2 element el-table自適應(yīng)高度的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論