Vue3中高度百分百设置
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
你是否有时候觉得css很麻烦尤其在设置高度的时候是否觉得为什么我设置了就是不生效呢,如果你有这个疑惑那么不妨看看我的解决方案!这方案只适合Element-plus的同胞
最近在看Element官方文档的时候无意间发现了虚拟表格这个东西,好奇心的驱使下我点开看了看结果发现了这个
自动调整大小然后通过AutoResizer 组件的插槽来获取宽高这样就可以实现高度百分之百了,亲测实效没问题
这里贴出我的实战例子
<el-auto-resizer>
<template #default="{ height, width }">
<vxe-table border show-overflow :width="width" :height="String(height)"
:column-config="{ resizable: true }" :scroll-y="{ enabled: true }"
:data="tableData"
v-bind="$attrs">
<el-scrollbar height="400px">
<template v-for="item in columns" :key="item.id">
<vxe-column v-bind="item" :field="item.prop"
:title="item.label"
:align="item.align ?? 'center'"
:show-overflow-tooltip="item.label == '操作' ? false :
true" v-if="item.show">
<template #default="{ row, $index }">
<template v-if="item.slotName">
<slot :name="item.slotName" :data="row"
:ind="$index"></slot>
</template>
<template v-else-if="item.enum && item.enum.length >
0">
{{ item.enum?.filter(em =>
em[item.fieldName.value] ===
row[item.prop])[0]?.[item.fieldName.label] || '--'
}}
</template>
<template v-else-if="item.formatPrice">
{{ parseFieldPrice(row[item.prop]) }}
</template>
<template v-else-if="item.isNumber">
{{ parseField(formatPrice(row[item.prop], 0)) }}
</template>
<template v-else>
{{ parseField(row[item.prop], row, item.prop) }}
</template>
</template>
</vxe-column>
</template>
</el-scrollbar>
</vxe-table>
</template>
</el-auto-resizer>
或者各位也可以在模板是打印height和width来看看
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)