你是否有时候觉得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
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079 [skip ci] 1 年前
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> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐