項目中表格需要自適應(yīng)高度，否則表格會撐開瀏覽器頁面出現(xiàn)2個滾動條祷蝌。不好看，做一個自定義的高度
首先在 src目錄下創(chuàng)建一個directive文件夾
在添加一個 adaptive.js
頁面縮放的監(jiān)聽是使用的 element-ui 中的 resize-event 外恕，將 addResizeListener 和 removeResizeListener 引入進來杆逗。自定義指令要用到的鉤子函數(shù)：
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用鳞疲。在這里可以進行一次性的初始化設(shè)置罪郊。
inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
unbind：只調(diào)用一次，指令與元素解綁時調(diào)用故黑。
// 設(shè)置表格高度
const doResize = async (el, binding, vnode) => {
// 獲取表格Dom對象
const {
componentInstance: $table
} = await vnode
// 獲取調(diào)用傳遞過來的數(shù)據(jù)
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
// 計算列表高度并設(shè)置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
$table.layout.setHeight(height)
$table.doLayout()
}
export default {
// 初始化設(shè)置
bind(el, binding, vnode) {
// 設(shè)置resize監(jiān)聽方法
el.resizeListener = async () => {
await doResize(el, binding, vnode)
}
// 綁定監(jiān)聽方法到addResizeListener
// addResizeListener(window.document.body, el.resizeListener)
window.addEventListener('resize', el.resizeListener)
},
update(el, binding, vnode) {
doResize(el, binding, vnode)
},
// 綁定默認高度
async inserted(el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 銷毀時設(shè)置
unbind(el) {
// 移除resize監(jiān)聽
// removeResizeListener(el, el.resizeListener)
window.removeEventListener('resize', 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
全局使用
如果存在多個頁面需要設(shè)置自適應(yīng)高度个唧，為了減少使用指令的復雜度，我們可以在 main.js 中全局引入自定義的指令，上述 script 的內(nèi)容就不需要在每個頁面進行寫入了睛挚。
import adaptive from './directive/el-table'
Vue.use(adaptive)
然后找到表格所在的標簽添加指令相關(guān)的代碼：
<el-table
ref="table"
// 自定義指令，bottomOffset 代表距離底部的距離
v-adaptive="{bottomOffset: 85}"
// 高度屬性急黎，100無具體意義扎狱，僅為初始值，不可省略
height="100px"
>
... ...
</table>
如果單頁面使用的話
import adaptive from '@/directive/el-table'引入即可
