使用 element ui vue js 的固定端组件

Question

我正在设计 post 促销活动，我需要将包含产品列表的面板固定在左侧。也许有我可以使用的库或组件？我正在使用元素 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%;
}

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

使用 element ui vue js 的固定端组件

fixed side component using element ui vue js

javascript

vue.js

element-ui