[JavaScript知识库]el-tabs和el-steps切换以及steps点击事件

首先，还是百度了一下示例，但是这些人的效果都不太满意，并且还有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

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读