《ElementUI 例子(elementui布局案例)》

一、解决方案简述

在使用ElementUI进行页面布局时，我们面临的是如何高效、美观地构建页面结构，同时确保良好的用户体验。ElementUI提供了丰富的组件，如布局容器（Container）、栅格系统（Grid）等，借助这些组件可以快速搭建出满足需求的页面布局。

二、基础布局 - 使用Container组件

当需要创建一个简单的上下左右布局结构时，Container组件是一个很好的选择。例如，要实现一个包含头部、主体和底部的页面布局。

html



      <span style="color:white;line-height:60px">Header</span>



        Aside


        Main



      <span style="line-height:60px">Footer</span>


</p>


export default {
  name: 'SimpleLayout'
}


<p>

这里通过el-container包裹了整个页面结构，el-header用于定义页面头部，el-footer是页面底部。而中间部分又嵌套了一个el-container，其中el-aside作为侧边栏，el-main是页面主体内容区域，并且为各个部分设置了不同的背景颜色以便区分。

三、响应式布局 - 利用Grid栅格系统

对于需要根据屏幕大小自适应调整布局的情况，栅格系统非常有用。

html

  <div>


        <div class="grid-content bg-purple"></div>


        <div class="grid-content bg-purple-light"></div>


        <div class="grid-content bg-purple"></div>


  </div>
</p>


  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }



export default {
  name: 'ResponsiveLayout'
}


<p>

el-row代表一行，el-col表示列。span属性用于设置列所占的宽度比例，而:xs、:sm、:md、:lg、:xl则分别对应不同屏幕尺寸下的列宽。这样就能保证在不同设备上都能有合适的布局效果。

四、复杂布局组合 - 多种组件混合使用

有时候页面布局会比较复杂，这时候可以将多种组件组合起来使用。比如一个带有导航栏、标签页并且有多个卡片展示内容的页面。

html




        处理中心

          我的工作台
          选项1
          选项2

        消息中心
        <a href="https://www.ele.me" target="_blank" rel="noopener">订单管理</a>




        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >

            <div class="clearfix">
              <span>{{item.title}}</span>
            </div>
            <div class="text item">
              {{'列表内容 ' + o }}
            </div>





</p>


  export default {
    data() {
      return {
        activeIndex: '1',
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }]
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleTabsEdit(targetName, action) {
        if (action === 'add') {
          let newTabName = ++this.tabIndex + '';
          this.editableTabs.push({
            title: 'New Tab',
            name: newTabName,
            content: 'New Tab content'
          });
          this.editableTabsValue = newTabName;
        }
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
            this.editableTabsValue = activeName;
          }
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      }
    }
  }



  .el-header {
    padding: 0;
  }
  .el-tabs__content {
    height: 300px;
  }
  .box-card {
    width: 480px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }


<p>