保存后的步骤条显示绿色，未保存显示蓝色 

        饿了么官网文档中有写单个步骤设置状态的参数 

 

        前端页面中el-step中:status需要绑定变量 :status="stepStatus[0]"

  <el-steps class="steps_class" :active="active" align-center><el-step title="项目基础信息":status="stepStatus[0]" @click.native="stepClick(0)"></el-step><el-step title="立项手续" :status="stepStatus[1]" @click.native="stepClick(1)"></el-step><el-step title="初步设计" :status="stepStatus[2]" @click.native="stepClick(2)"></el-step><el-step title="土地批复情况" :status="stepStatus[3]" @click.native="stepClick(3)"></el-step><el-step title="用地规划、建设工程规划" :status="stepStatus[4]" @click.native="stepClick(4)"></el-step><el-step title="招投标信息" :status="stepStatus[5]" @click.native="stepClick(5)"></el-step><el-step title="消防设计审查" :status="stepStatus[6]" @click.native="stepClick(6)"></el-step><el-step title="重大工程专家论证" :status="stepStatus[7]" @click.native="stepClick(7)"></el-step><el-step title="建设工程档案报送责任书" :status="stepStatus[8]" @click.native="stepClick(8)"></el-step><el-step title="质量监督注册" :status="stepStatus[9]" @click.native="stepClick(9)"></el-step><el-step title="安全监督注册" :status="stepStatus[10]" @click.native="stepClick(10)"></el-step><el-step title="施工许可证" :status="stepStatus[11]" @click.native="stepClick(11)"></el-step></el-steps>

         vue中步骤条绑定的对象，是一个数组

 data() {return {stepStatus: ['', '', '', '', '', '', '', '', '', '', '', '',],

        当步骤条下的表单触发保存功能时，将当前步骤条的active值存储到一个数组中

        将数组存放到后端，进行保存

 //将保存后的选项卡index存储setCss() {let array = this.stepListlet uniqueArray = array.filter((value, index, self) => {return self.indexOf(value) === index;});console.log(uniqueArray)let index = {uniqueArray: uniqueArray, projectId: this.projectId}this.post('${ctx}/project/buildProject/saveIndex', index).then((res) => {})},

        每次在页面加载时，查询保存了的数组并赋值

         最后需要监听，存有active数组的变化，进行步骤条渲染

        watch: {'stepList'() {this.setStepStyle(this.stepList)}},

         将数组遍历，对应的修改绑定的值

         setStepStyle(data) {for(let i=0;i<data.length;i++){this.stepStatus[data[i]] = 'success'}},