前端 项目开发 如何用 element-ui 实现竖线分割显示样式

在使用 Element UI（或 Element Plus）时，如果你想要实现一个竖线分割的样式，可以通过 CSS 来定制，结合 Element UI 提供的布局组件（如 el-row 和 el-col）来实现竖线分隔的效果。

下面是几种常见的实现方法：

1. 使用 CSS 自定义竖线分隔样式

假设你希望在某个容器内部通过竖线来分隔不同的元素，可以通过 border-left 或者 border-right 来实现。可以参考以下代码：

示例：通过 CSS 实现竖线分隔的布局

  
    
      内容 1
    
      
    
      内容 2
    
      
    
      内容 3
    
  


.line-separator {
  display: flex;
  align-items: center;
}
.item {
  padding: 10px;
  background-color: #f9f9f9;
  text-align: center;
}
.vertical-line {
  height: 100%;
  width: 1px;
  background-color: #dcdfe6; /* 竖线颜色 */
  margin: 0 10px;  /* 竖线左右的间距 */
}

解释：

• el-row 和 el-col 是 Element UI 中的布局组件，我们用它们来划分区域。
• vertical-line 类表示竖线元素，它的样式包括 height: 100% 来使竖线占满容器的高度，width: 1px 来设置竖线的宽度，background-color 设置竖线的颜色，margin 用来给竖线和内容之间增加一些间距。

  2. 使用 el-divider 实现竖线分割

  如果你只需要简单的分隔线而不需要通过布局来实现竖线分割，el-divider 组件也是一个不错的选择。默认情况下，el-divider 是水平分割线，但可以通过 direction 属性来实现竖向分割。

  示例：使用 el-divider 实现竖线分隔

    
      
        内容 1
      
       
      
        内容 2
      
       
      
        内容 3
      
    
  
  
  .item {
    padding: 10px;
    background-color: #f9f9f9;
    text-align: center;
  }
  
  

  解释：

  • el-divider：Element UI 中的分割线组件，direction="vertical" 属性将其转为竖向分隔线。
  • el-row 和 el-col 用来进行布局，竖线分隔就通过 el-divider 来实现。

    3. 自定义组合实现竖线

    如果你需要更多自定义的样式或者动态控制竖线的位置和样式，可以使用一个简单的容器元素来包裹需要分隔的内容，然后手动添加竖线。

    示例：自定义实现竖线

      
        
          内容 1
        
          
        
          内容 2
        
          
        
          内容 3
        
      
    
    
    .custom-separator {
      display: flex;
      align-items: center;
    }
    .section {
      padding: 10px;
      background-color: #f9f9f9;
      text-align: center;
    }
    .vertical-line {
      height: 100%;
      width: 1px;
      background-color: #dcdfe6;
      margin: 0 15px;
    }
    
    

    解释：

    • custom-separator：这个容器用于包裹所有的内容部分和竖线分隔部分。
    • vertical-line：和前面一样，是竖线的样式。
    • section：每个内容部分的样式，保证它们在竖线的左右部分排列。

      结论

      以上几种方法都可以帮助你在 Element UI 项目中实现竖线分隔效果。选择哪种方式取决于你对布局的需求：

      1. 如果你希望灵活地控制竖线和布局，使用 CSS 和 div 元素实现竖线分隔会非常简单。
      2. 如果你希望快速实现竖向分隔线，el-divider 组件是一个简便且符合规范的选择。

      根据需要调整样式和布局，可以满足各种场景的需求。

      
      （图片来源网络，侵删）
      
      （图片来源网络，侵删）
      
      （图片来源网络，侵删）