Vue+ElementUI el-steps 完成后不使用对勾,一直用数字来显示进度条

在Vue中使用Element UI的el-steps组件时，默认情况下每个步骤后面都会有一个对勾来表示该步骤已完成。如果你想要不使用对勾，而是使用步骤的数字来表示进度，可以通过覆盖默认样式来实现。

以下是一个简单的例子，展示了如何通过自定义样式来实现这一效果：

<template>
  <el-steps :space="200" :active="activeStep" finish-status="process">
    <el-step v-for="item in steps" :key="item.title" :title="item.title"></el-step>
  </el-steps>
</template>
 
<script>
export default {
  data() {
    return {
      activeStep: 1, // 当前激活步骤
      steps: [
        { title: '步骤 1' },
        { title: '步骤 2' },
        { title: '步骤 3' },
        { title: '步骤 4' }
      ]
    };
  }
};
</script>
 
<style scoped>
.el-step__icon {
  display: none; /* 隐藏对勾 */
}
 
.el-step__line {
  display: none; /* 隐藏进度条线 */
}
 
.el-step__title {
  position: relative;
  margin-left: 30px; /* 或者其他适合的值，用于保留数字的空间 */
}
 
.el-step__title::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; /* 数字的宽度 */
  height: 30px; /* 数字的高度 */
  line-height: 30px; /* 数字的行高 */
  text-align: center;
  border-radius: 50%;
  background-color: #ffffff; /* 数字的背景色 */
  color: #1890ff; /* 数字的颜色 */
  font-size: 14px; /* 数字的字体大小 */
}
</style>

在这个例子中，我们通过自定义样式隐藏了对勾和进度条线，并且使用伪元素::before在每个步骤标题的左侧显示数字。你可以根据需要调整数字的样式。这样，el-steps组件就会显示为使用数字表示进度，而不是对勾。