在项目中,写了一个表格自适应高度的自定义指令。用$table.layout.setMaxHeight(height)修改table组件的最大高度不生效。换了用$table.maxHeight = height生效了,但是会报警告。
以下是自定义指令v-adaptive文件:
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
// 设置表格高度
const doResize = async (el, binding, vnode) => {
// 获取表格Dom对象
const { componentInstance: $table } = await vnode
// 获取调用传递过来的数据
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
// 计算列表高度并设置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
// $table.layout.setHeight(height)
// 设置最大高度
// $table.layout.setMaxHeight(height) // 不生效
$table.maxHeight = height // 生效,但是直接修改组件props,会报警告
$table.doLayout()
}
export default {
// 初始化设置
bind (el, binding, vnode) {
// 设置resize监听方法
el.resizeListener = async () => {
await doResize(el, binding, vnode)
}
// 绑定监听方法到addResizeListener
addResizeListener(window.document.body, el.resizeListener)
addResizeListener(el, el.resizeListener)
},
// 绑定默认高度
async inserted (el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 组件发生变化时触发
async componentUpdated (el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 销毁时设置
unbind (el) {
// 移除resize监听
removeResizeListener(el, el.resizeListener)
}
}
在elementUI table中使用如下:
<el-table
border
:data="tableData"
element-loading-text="系统处理中,请稍等"
v-loading.lock="queryTableLoading"
:max-height="300"
v-adaptive="{ bottomOffset: 90 }"
>
<template v-for="column in tableColumns">
<el-table-column
:key="column.prop"
:type="column.type"
:prop="column.prop"
:label="column.label"
:align="column.align"
:min-width="column.minWidth"
:fixed="column.fixed"
:show-overflow-tooltip="true"
v-if="column.visible"
>
</el-table-column>
</template>
</el-table>
使用过程中,控制台会报警告:
后来我修改了用
$table.layout.setMaxHeight(height),但是不生效。换了用$table.maxHeight = height生效了,但是会报上面的警告。
有帮忙看下嘛?