你已选择使用 **Flex +
border-bottom 虚线** 的方式来实现“检测指标名称
--- 数值”这种布局，这是目前在 Vue3 中最推荐、最稳定且响应式友好的方案。
下面是基于你的需求（10 条数据、动态数值从接口获取、单位显示、中间为虚线连接）的完整、可运行的 Vue3 代码示例，使用 `flex` 布局和 `
border-bottom` 实现视觉上的 `
----` 连接效果。
---
### ✅ 完整代码：Vue3 + TypeScript + Flex +
border-bottom 虚线
```vue
<template>
<div class="indicator
-list">
<div
v
-for="(item, index) in indicators"
:key="index"
class="indicator
-item"
>
<!
-- 指标名称
-->
<span class="label">{{ item.label }}</span>
<!
-- 动态虚线横杠
-->
<span class="dashed
-line"></span>
<!
-- 数值与单位
-->
<span class="value">
{{ item.value !== null ? item.value.toFixed(2)
: '
--' }} {{ item.unit }}
</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
// 定义指标类型
interface Indicator {
label
: string; // 指标名称，如“全场有功功率”
value
: number | null; // 数值（null 表示未加载）
unit
: string; // 单位，如 MW、kV 等
}
// 初始化数据（value 为 null，等待接口返回）
const indicators = ref<Indicator[]>([
{ label
: '全场有功功率', value
: null, unit
: 'MW' },
{ label
: '无功功率', value
: null, unit
: 'MVar' },
{ label
: '电压', value
: null, unit
: 'kV' },
{ label
: '电流', value
: null, unit
: 'A' },
{ label
: '频率', value
: null, unit
: 'Hz' },
{ label
: '日发电量', value
: null, unit
: 'kWh' },
{ label
: '月发电量', value
: null, unit
: 'MWh' },
{ label
: '年发电量', value
: null, unit
: 'GWh' },
{ label
: '功率因数', value
: null, unit
: '' },
{ label
: '温度', value
: null, unit
: '℃' },
]);
// 模拟异步请求接口获取数值
onMounted(() => {
setTimeout(() => {
indicators.value = indicators.value.map((item, idx) => {
const values = [32.81, 12.45, 10.5, 13
6.7, 50.02, 280.5,
6500, 78000, 0.9
6, 3
6];
return {
...item,
value
: values[idx],
};
});
}, 1500);
});
</script>
<style scoped>
.indicator
-list {
font
-family
: 'Courier New', monospace;
padding
: 1
6px 0;
max
-width
: 520px;
margin
: 0 auto;
}
.indicator
-item {
display
: flex;
align
-items
: center;
height
: 3
6px;
color
: #f1f9ff;
font
-size
: 14px;
}
.label {
min
-width
: 90px;
/* 可根据最长标签调整，保证左列对齐 */
}
.dashed
-line {
flex
: 1;
border-bottom: 1px dashed #00eaff;
margin
: 0 8px;
transform
: translateY(
-4px);
/* 让虚线与文字平齐，避免贴着下边缘 */
}
.value {
color
: #00eaff;
font
-weight
: bold;
white
-space
: nowrap;
width
: 90px;
text
-align
: left;
}
</style>
```
---
### 🔍 关键点解释：
| 特性 | 说明 |
|
------|
------|
| `.indicator
-item` 使用 `display
: flex` | 实现三段式布局：左文字 → 中间线 → 右数值 |
| `.dashed
-line` 使用 `flex
: 1` | 自动填充中间剩余空间，
长度随容器自适应 |
| `
border-bottom: 1px dashed #00eaff` | 视觉上等效于 `
----`，比文本更清晰可控 |
| `transform
: translateY(
-4px)` | 微调虚线位置，使其与文字垂直居中对齐 |
| `onMounted` 模拟接口请求 | 实际项目中替换为 `axios/fetch` 请求真实数据 |
| `toFixed(2)` | 统一保留两位小数，增强美观性 |
---
### 🖼️ 最终效果示意（渲染后）：
```
全场有功功率
------------------------------ 32.81 MW
无功功率
--------------------------------- 12.45 MVar
电压
---------------------------------------- 10.50 kV
...
```
所有行右侧数值自动对齐，无论左边文字长短如何。
---
### ✅ 优点总结：
- ✅ 完美支持不同
长度标签
- ✅ 响应式自适应各种屏幕
- ✅ 不依赖等宽字体
- ✅ 易维护、高性能
- ✅ 支持动态更新数据
---
本文介绍如何使用CSS的:after伪元素为当前元素添加一个红色的下划线效果，通过相对定位和绝对定位实现居中对齐，适用于类目切换时添加高亮样式。
想做一个这个效果,
有很多类目切换时候添加cur样式
扫一扫
4099
到【灌水乐园】发言
