vue3+element-plus表格自适应高度
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
之前有写到如何通过自定义指令的方式在vue2项目中实现对element-ui表格的自适应高度,在这里不多赘述vue2和vue3自定义指令写法有何不同,直接抛代码,如若有该需求,可直接复制到项目中使用
又是熟悉的adaptive.js文件,具体用法可转至vue element table表格高度自适应查看
import ResizeObserver from "resize-observer-polyfill";
const isServer = typeof window === "undefined";
/* istanbul ignore next */
const resizeHandler = function (entries) {
for (let entry of entries) {
const listeners = entry.target.__resizeListeners__ || [];
if (listeners.length) {
listeners.forEach((fn) => {
fn();
});
}
}
};
/* istanbul ignore next */
export const addResizeListener = function (element, fn) {
if (isServer) {
return;
}
if (!element.__resizeListeners__) {
element.__resizeListeners__ = [];
element.__ro__ = new ResizeObserver(resizeHandler);
element.__ro__.observe(element);
}
element.__resizeListeners__.push(fn);
};
/* istanbul ignore next */
export const removeResizeListener = function (element, fn) {
if (!element || !element.__resizeListeners__) {
return;
}
element.__resizeListeners__.splice(
element.__resizeListeners__.indexOf(fn),
1
);
if (!element.__resizeListeners__.length) {
element.__ro__.disconnect();
}
};
/**
* How to use
* <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
* el-table height is must be set
* bottomOffset: 30(default) // The height of the table from the bottom of the page.
*/
const doResize = (el, binding, vnode) => {
const { el: $table } = vnode;
const { value } = binding;
if (!value.fixedHeader) {
return;
}
const bottomOffset = (value && value.bottomOffset) || 70;
if (!$table) {
return;
}
const layout = document.getElementById("app");
setTimeout(() => {
const height =
window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
const layoutHeight = layout.clientHeight;
layoutHeight > 810
? (layout.style.minHeight = "810px")
: (layout.style.minHeight = "auto");
$table.style.height = height + 'px';
// $table.doLayout();
}, 600);
};
export default {
beforeMount(el, binding, vnode) {
el.resizeListener = () => {
doResize(el, binding, vnode);
};
addResizeListener(window.document.body, el.resizeListener);
},
mounted(el, binding, vnode) {
doResize(el, binding, vnode);
},
unmounted(el) {
const layout = document.getElementById("app");
layout.style.minHeight = "810px";
removeResizeListener(window.document.body, el.resizeListener);
},
};
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)