Vue第四篇之Vue.js中el-steps步骤的简单使用

最新推荐文章于 2024-08-28 14:14:55 发布

小达哥的垃圾桶

最新推荐文章于 2024-08-28 14:14:55 发布

阅读量4w

点赞数 6

分类专栏：前端开发文章标签： vue

本文为博主原创文章，未经博主同意请勿转载！

本文链接：https://blog.csdn.net/qq_31122833/article/details/80269794

版权

前端开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

html中：
<div class="step">
    <el-steps :active="orderStatus" >
        <el-step :title="item.title" :description="item.description" v-for="item in items"></el-step>
    </el-steps>
</div>

js中：
1、初始化定义orderStatus、items数组、orderStatus数组
orderStatus: 1,
items:[{title:'开单',description:''},{title:'待付款',description:''},{title:'完成',description:''}]
let orderStatus = {
    'NONPAYMENT':2,
    'HASDONE':3
};
2、得到的数据对步骤中的description数组进行赋值
this.items[0].description = this.formartDate(res.data.data.createDate);
if(res.data.data.updateDate){
    this.items[1].description = this.formartDate(res.data.data.updateDate);
    this.items[2].description = this.formartDate(res.data.data.updateDate);
}
3、时间转换方法：
formartDate(param) {
    let date = new Date(param);
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    return Y + M + D;
},

效果图：