动态设置某个el-step的状态

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

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

?

? ? ? ? 前端页面中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.stepList
                let 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'
                }
            },