Steps 步骤条的最后一个节点如何根据结果动态设置

最新推荐文章于 2024-01-19 11:55:26 发布

_处女座程序员的日常

最新推荐文章于 2024-01-19 11:55:26 发布

阅读量1.5k

点赞数

分类专栏： Element UI 前端

本文链接：https://blog.csdn.net/qq_42931285/article/details/124813197

版权

前端 elementui

前端同时被 2 个专栏收录

375 篇文章 13 订阅

订阅专栏

Element UI

58 篇文章 1 订阅

订阅专栏

利用process-status属性值

在这里插入图片描述

<template>
    <div>
        <el-steps :active="active" :process-status="status">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
        </el-steps>

        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: 0,
                status: 'success',
            };
        },

        methods: {
            next() {
                if(this.active<2){
                this.active++;
                if (this.active == 2) {//这里可以根据实际结果判断
                    this.status = 'error';
                }
            
            }
            }
        }
    }
</script>