Vue第四篇之vue.js中el-steps步驟的簡單使用
阿新 • • 發佈:2019-01-03
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;
},