element步骤条steps配合标签页tabs使用

效果图：

注意：

1. activeIndex必须用"activeIndex - 0"来字符串转数字
2. 实现步骤：在第一个步骤标签页里的点击事件先让标签页跳转到第二个步骤，再用延时加载跳转第三个步骤的标签页
3. 最后主要就是样式的修改
4. 表单和列表具体实现展示就要自己进行数据绑定了

<template>
  <div class="table-container-wapper">
    <el-card>
      <el-steps :active="activeIndex-0"
                :space="300"
                finish-status="success">
        <el-step title="输入设备ID"></el-step>
        <el-step title="搜索设备"></el-step>
        <el-step title="绑定设备"></el-step>
      </el-steps>
      <!--2022.10.12样式改进-->
      <el-steps :active="activeIndex-0"
                :space="300"
                finish-status="success"
                direction="vertical">
        <el-step title="Enter Device Id"></el-step>
        <img src="../../../../assets/images/step_line.png"/>
        <el-step title="Search Device"></el-step>
        <img src="../../../../assets/images/step_line.png"/>
        <el-step title="Bind The Device"></el-step>
      </el-steps>
      <!--2022.10.12样式改进-->
      <el-tabs v-model="activeIndex"
               style="height:100%">
        <el-tab-pane name="0">
          <template>
            <el-form label-width="100px"
                     :model="form"
                     :rules="rules"
                     ref="form">
              <el-form-item label="设备ID:">
                <el-input></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="cancel">取消</el-button>
                <el-button type="info"
                           @click="sure">确定添加</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-tab-pane>
        <el-tab-pane name="1"
                     style="text-align:center">
          <template>
            <img class="search_img"
                 src="../../../../assets/images/search.png" />
            <p class="search_tip">设备搜索中......</p>
          </template>
        </el-tab-pane>
        <el-tab-pane name="2">设备列表</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>


export default {
  data () {
    return {
      activeIndex: '0',
      form: {},
      count: "",
    }
  },
  methods: {
    sure () {
      this.activeIndex = '1'
      const timejump = 1;
      if (!this.timer) {
        this.count = timejump;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timejump) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.activeIndex = '2'
          }
        }, 3000)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.table-container-wapper {
  padding: 30px;
  overflow-y: auto;
  .el-form {
    max-width: 500px;
    white-space: normal;
    margin-left: -40px;
    .el-form-item {
      white-space: nowrap;
      .el-input {
        max-width: 300px;
      }
      .el-button {
        width: 99px;
        height: 41px;
        font-size: 14px;
        font-weight: 400;
      }
      .cancel {
        background: #f4f4f5;
        border: 1px solid #d3d4d6;
        border-radius: 5px;
      }
    }
  }
  ::v-deep .el-card {
    border: 0px;
    box-shadow: 0 0 0 0;
    height: 100%;
    .el-card__body {
      height: 100%;
      padding: 0px;
      .el-steps--horizontal {
        height: 105px;
        background: #f9fafc;
        border-radius: 5px;
        padding-left: 30px;
      }
      .el-step.is-horizontal .el-step__line {
        height: 26px;
        background: url(../../../../assets/images/step_line.png);
        background-repeat: no-repeat;
        top: 0px;
        left: 148px;
        right: 30px;
      }
      .el-step__main {
        white-space: normal;
        text-align: left;
        position: absolute;
        left: 35px;
        top: -5px;
        margin-top: 41px;
        .el-step__title {
          white-space: nowrap;
        }
      }
      .el-tabs__header {
        padding: 0;
        margin: 0;
        .el-tabs__nav-wrap::after {
          height: 0px;
          background-color: #ffffff;
        }
      }
      .el-step__head.is-process {
        margin-top: 41px;
        color: #0782ff;
        .el-step__icon {
          color: #ffffff;
          background-color: #0782ff;
          border-color: #0782ff;
        }
      }
      .el-step__title.is-process {
        color: #0782ff;
      }
      .el-step__head.is-wait {
        margin-top: 41px;
        .el-step__icon {
          color: #606266;
          background: #ffffff;
          border-color: #d3d4d6;
        }
      }
      .el-step__title.is-wait {
        color: #303133;
      }
      .el-step__head.is-success {
        margin-top: 41px;
        .el-step__icon {
          color: #ffffff;
          background: #13ce66;
          border-color: #13ce66;
        }
      }
      .el-step__title.is-success {
        color: #303133;
      }
      .el-step__line-inner {
        border: 0px;
      }
    }
  }
  .search_img {
    width: 255px;
    height: 255px;
  }
  .search_tip {
    font-size: 14px;
    font-weight: 400;
    color: #3e4844;
  }
}
</style>

切图放这了！

这里是调用接口后写的延时查询，searchDev()方法里是调用搜索接口

confirm(){
 this.activeIndex = "1";
        this.searchDev().then((res) => {
          setTimeout(() => {
            this.activeIndex = "2";
          }, 500);
        });
      });
}

样式改进（2022.10.12）：根据标题文字长度自适应

.el-steps--vertical{
  height: 105px;
  background: #f9fafc;
  border-radius: 5px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  flex-direction: row;
  img{
     margin-right: 20px;
     margin-left: 20px;
  }
  .el-step.is-vertical{
     flex-basis:unset !important;
     .el-step__head.is-process,.is-wait{
       display: flex;
       align-items: center;
       .el-step__line{
         display: none;
       }
     }
     .el-step__head.is-process{
       .el-step__icon {
         color: #ffffff;
         background-color: $--color-primary;
         border-color: $--color-primary;
       }
     }
     .el-step__head.is-wait {
       .el-step__icon {
         color: $--text-color-regular;
         background: #ffffff;
         border-color: #d3d4d6;
       }
     }
     .el-step__main{
       white-space: nowrap;
       .el-step__title.is-process{
         color: $--color-primary;
         padding: 0;
       }
       .el-step__title.is-wait {
         color: $--text-color-primary;
         padding: 0;
       }
       .el-step__title.is-success{
         color: $--text-color-primary;
         padding: 0;
       }
     }
   } 
 }