Vue3中高度百分百设置

你是否有时候觉得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来看看