0 效果
1 添加自定义指令
新建目录src/directive/el-table
在el-table目录下新建文件adaptive.js
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'// 设置表格高度const doResize = async(el, binding, vnode) => {// 获取表格Dom对象const { componentInstance: $table } = await vnode// 获取调用传递过来的数据 const { value } = bindingif (!$table.height) {throw new Error(`el-$table must set the height. Such as height='100px'`)}// 获取距底部距离(用于展示页码等信息)const bottomOffset = (value && value.bottomOffset) || 90if (!$table) return// 计算列表高度并设置const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset$table.layout.setHeight(height)$table.doLayout()
}export default { // 初始化设置bind(el, binding, vnode) { // 设置resize监听方法el.resizeListener = async() => { await doResize(el, binding, vnode)} // 绑定监听方法到addResizeListeneraddResizeListener(window.document.body, el.resizeListener) }, // 绑定默认高度async inserted(el, binding, vnode) { await doResize(el, binding, vnode) }, // 销毁时设置unbind(el) { // 移除resize监听removeResizeListener(el, el.resizeListener) }
}
在el-table目录下新建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 = installexport default adaptive
2 引入
2.1 单个vue文件引入
在所需使用的vue页面中引入
import adaptive from ‘…/…/…/src/directive/el-table’
2.2 全局引入
在main.js中引入
3 使用
在el-table标签中添加属性
v-adaptive:自定义指令,bottomOffset 代表距离底部的距离
height:高度属性,100无具体意义,仅为初始值,不可省略