使用 element ui vue js 的固定侧组件答案

【问题标题】：fixed side component using element ui vue js使用 element ui vue js 的固定侧组件
【发布时间】：2020-05-18 16:34:53
【问题描述】：

我正在设计售后，我需要将包含产品列表的面板固定在左侧。也许有我可以使用的库或组件？我正在使用元素 ui。

作为参考我留下odoo post的图片，左侧产品列表没有移动（滚动）：

<template>
     <div class="dashboard-editor-container">
         <el-row :gutter="10">
             <el-col :span="12">
                         ree

             </el-col>

             <el-col :span="12">

                 <el-card class="fixed-content">
                          <div slot="header" class="clearfix">
                        <span>List Product</span>
                        <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
                    </div>
                 </el-card>

             </el-col>
         </el-row>


     </div>
</template>


<style lang="scss" scoped>

.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  width: 100%;

}

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
    margin-right: 0px
}

</style>

希望大家给我建议，如果我的问题写错了请指正，谢谢。

【问题讨论】：

标签： javascript vue.js element-ui

【解决方案1】：

只需一点 HTML 和 CSS，我认为您可以轻松实现目标：

HTML

<div class="wrapper">
  <aside class="wrapper__aside">
    <!-- products here -->
  </aside>
  <main class="wrapper__body">
    <!-- main content here -->
  </main>
</div>

CSS

.wrapper {
  position: relative;
}

.wrapper__aside {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25%;
}

.wrapper__body {
  margin-left: 25%;
}

关键是在固定元素周围有一个相对定位的容器。另外要修正固定元素的宽度，还需要加边距来补偿。

【讨论】：