前端 项目开发 如何用 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 组件是一个简便且符合规范的选择。

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