javascript - 使用 element ui vue js 固定侧组件

Question

我正在设计售后，我需要将包含产品列表的面板固定在左侧。也许有我可以使用的库或组件？我正在使用 element 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>

希望您能给我建议，如果我的问题写得不正确，请纠正我，谢谢。

Answer 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%;
}

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