下拉框二级联动

 进度状态的下拉框数据是根据流程节点所选中的数据来展示

这里由于后端不好处理,前端把两个下拉框的数据手动输入进去

 

<el-form-item label="流程节点">
  <el-select v-model="searchForm.currentStepValue" placeholder="请选择" @change="changeSelect">
    <el-option v-for="(item,index) in brandOptions" :key="index" :label="item.label" :value="item.value"/>
  </el-select>
</el-form-item>
<el-form-item label="进度状态">
  <el-select v-model="searchForm.acceptStateValue" placeholder="请选择">
    <el-option v-for="(item,index) in typeOptions" :key="index" :label="item.label" :value="item.value"/>
  </el-select>
</el-form-item>

data() {
    return {
        brandOptions: processNode, // 流程节点
        brandObj: scheduleStatus[0], // 进度状态
        typeOptions:[],

        searchForm: {
             currentStepValue: undefined,
             acceptStateValue: undefined,
        },
    }
}

methods: {
    changeSelect() {
      // 清空进度状态内容
      this.searchForm.acceptStateValue = undefined;
      // 先把对象中的数据遍历出来,遍历出来的数据是:['1','2','3']
      for (let i = 0; i < Object.keys(this.brandObj).length; i++){
        // this.searchForm.currentStepValue是数字 与 Object.keys(this.brandObj)[i]是编制出来的数字  进行比较
        if (this.searchForm.currentStepValue == Object.keys(this.brandObj)[i]){
          const keys = this.searchForm.currentStepValue
          // 数字一样,再把对应的数据赋值给 this.typeOptions进度状态的下拉框
          this.typeOptions = this.brandObj[keys]
         }
       }
    },
}

// 因为我定义的进度状态的数据是 对象类型的

这里是我的数据 constant.js

// 流程节点
export const processNode = [
    {label:'申请提交',value:1},
    {label:'县区级审核',value:2},
    {label:'市级审核',value:3},
    {label:'申请递交',value:4},
    {label:'市级现场验收',value:5},
    {label:'市验整改',value:6},
    {label:'市验整改审核',value:7},
    {label:'市验材料提交',value:8},
    {label:'省级现场验收',value:9},
    {label:'省验整改',value:10},
    {label:'省验整改初审',value:11},
    {label:'省验整改复审',value:12},
    {label:'省验材料提交',value:13},
    {label:'发文批复',value:14},
    {label:'验收通过',value:15},
]

// 进度状态
export const scheduleStatus = [
    {
        1:[ {label: '待提交',value: 1},{label: '区县驳回',value: 2},{label: '市级驳回',value: 3} ],
        2:[ {label: '待审核',value: 4} ],
        3:[ {label: '待审核',value: 5} ],
        4:[ {label: '待提交',value: 6} ],
        5:[ {label: '待验收',value: 7},{label: '市验不合格',value: 8} ],
        6:[ {label: '待整改',value: 9},{label: '市级驳回',value: 10} ],
        7:[ {label: '待审核',value: 11} ],
        8:[ {label: '待提交',value: 12} ],
        9:[ {label: '待验收',value: 13},{label: '资料审核不合格',value: 14},{label: '省验不合格',value: 15} ],
        10:[ {label: '待整改',value: 16},{label: '初审（市级）驳回',value: 17},{label: '复审（省级）驳回',value: 18} ],
        11:[ {label: '待审核',value: 19} ],
        12:[ {label: '待审核',value: 20},{label: '省验整改不合格',value: 21} ],
        13:[ {label: '待提交',value: 22} ],
        14:[ {label: '待批复',value: 23} ],
        15:[ {label: '批复通过',value: 25},{label: '批复未通过',value: 26} ],
    }
]