el-tabs和el-steps切换以及steps点击事件

16 篇文章 0 订阅

首先,还是百度了一下示例,但是这些人的效果都不太满意,并且还有bug,故而自己改造了一下代码。

<template>
  <div>
    <el-steps :active="active_index - 0" simple style="margin-top: 20px">
      <el-step
          v-for="(item,index) of stepParams"
          :key="index"
          :title="item.title"
          :icon="item.icon"
          :status="item.status"
          :class="stepSuc.includes(index) ? 'stepSuc':'stepErr'"
          @click.native="handleStep(index)"
      />
    </el-steps>
    <el-tabs :tab-position="'left'" v-model="active" style="height: 500px;" @tab-click="handleTabStep">
      <el-tab-pane label="步骤一" name="0">步骤一</el-tab-pane>
      <el-tab-pane label="步骤二" name="1">步骤二</el-tab-pane>
      <el-tab-pane label="步骤三" name="2">步骤三</el-tab-pane>
      <el-tab-pane label="步骤四" name="3">步骤四</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "xxxxCompent",
  props: {
    parameter: {}
  },
  data() {
    return {
      // 步骤
      active_index: 0,
      active: '0',
      // 已选步骤
      stepSuc: [0],
      // 步骤参数
      stepParams: [
        {
          title: '步骤一',
          icon: 'el-icon-edit',
          status: 'process'
        },
        {
          title: '步骤二',
          icon: 'el-icon-upload',
          status: 'wait'
        },
        {
          title: '步骤三',
          icon: 'el-icon-picture',
          status: 'wait'
        },
        {
          title: '步骤四',
          icon: 'el-icon-circle-check',
          status: 'wait'
        },
      ],
    }
  },
  methods: {
    // 点击步骤条
    handleStep(val) {
      if (this.stepSuc.includes(val)) {
        this.active_index = val;
        this.active = val.toString();
      }
      this.handleStatus();
    },
    // 点击tab
    handleTabStep() {
      this.stepSuc = [];
      this.active_index = parseInt(this.active);
      let temp = this.active_index;
      while (temp !== 0) {
        this.stepSuc.push(--temp);
      }
      this.handleStatus();
    },
    handleStatus(){
      switch (this.active_index){
        case 0:
          this.stepParams[0].status = 'process';
          this.stepParams[1].status = 'wait';
          this.stepParams[2].status = 'wait';
          this.stepParams[3].status = 'wait';
          break;
        case 1:
          this.stepParams[0].status = 'finish';
          this.stepParams[1].status = 'process';
          this.stepParams[2].status = 'wait';
          this.stepParams[3].status = 'wait';
          break;
        case 2:
          this.stepParams[0].status = 'success';
          this.stepParams[1].status = 'finish';
          this.stepParams[2].status = 'process';
          this.stepParams[3].status = 'wait';
          break;
        case 3:
          this.stepParams[0].status = 'success';
          this.stepParams[1].status = 'success';
          this.stepParams[2].status = 'finish';
          this.stepParams[3].status = 'process';
          break;
        default:
          this.stepParams[0].status = 'process';
          this.stepParams[1].status = 'wait';
          this.stepParams[2].status = 'wait';
          this.stepParams[3].status = 'wait';
          break;
      }
    },
    // 组件点击上一步
    handleLastStep() {
      if (--this.active_index === 0) {
        this.active_index = 0
      }
    },
    // 组件点击下一步
    handleNextStep() {
      this.stepSuc.push(++this.active_index)
    },
  },
}
</script>

<style scoped>
.stepSuc :hover {
  cursor: pointer;
}

.stepErr :hover {
  cursor: not-allowed;
}

</style>

在这里插入图片描述
参照连接:https://blog.csdn.net/weixin_44769310/article/details/104655670
https://blog.csdn.net/weixin_42614080/article/details/104393335

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hikktn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值