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

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

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

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

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

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

<template>
  <el-row class="line-separator">
    <el-col :span="8" class="item">
      <div>内容 1</div>
    </el-col>
    <div class="vertical-line"></div>  <!-- 竖线分隔 -->
    <el-col :span="8" class="item">
      <div>内容 2</div>
    </el-col>
    <div class="vertical-line"></div>  <!-- 竖线分隔 -->
    <el-col :span="8" class="item">
      <div>内容 3</div>
    </el-col>
  </el-row>
</template>

<style scoped>
.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;  /* 竖线左右的间距 */
}
</style>

解释：

• 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 实现竖线分隔

<template>
  <el-row class="line-separator">
    <el-col :span="8" class="item">
      <div>内容 1</div>
    </el-col>
    <el-divider direction="vertical"></el-divider> <!-- 竖向分割线 -->
    <el-col :span="8" class="item">
      <div>内容 2</div>
    </el-col>
    <el-divider direction="vertical"></el-divider> <!-- 竖向分割线 -->
    <el-col :span="8" class="item">
      <div>内容 3</div>
    </el-col>
  </el-row>
</template>

<style scoped>
.item {
  padding: 10px;
  background-color: #f9f9f9;
  text-align: center;
}
</style>

解释：

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

3. 自定义组合实现竖线

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

示例：自定义实现竖线

<template>
  <div class="custom-separator">
    <div class="section">
      <div>内容 1</div>
    </div>
    <div class="vertical-line"></div>  <!-- 竖线分隔 -->
    <div class="section">
      <div>内容 2</div>
    </div>
    <div class="vertical-line"></div>  <!-- 竖线分隔 -->
    <div class="section">
      <div>内容 3</div>
    </div>
  </div>
</template>

<style scoped>
.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;
}
</style>

解释：

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

结论

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

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

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

原文地址：https://blog.csdn.net/huang3513/article/details/144241656

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！