elementui el-select 两个下拉框,后面的内容是前面内容的子集

效果:

代码:

<el-form-item label="所属者" :label-width="formLabelWidth">
                  <el-select
                    v-model="formItem.subordinate"
                    placeholder="请选择"
                    size="mini"
                    @change="subordinateChange"
                  >
                    <el-option
                      v-for="item in subordinateList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
</el-form-item>
<el-form-item label="群组" label-width="80px">
                  <el-select v-model="formItem.groupVal" placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in groupList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
</el-form-item>
methods:{
subordinateChange (val) {
      this.formItem.groupVal = ''
      for (let item of this.subordinateList) {
        if (val === item.id) {
          this.groupList = item.children
        }
      }
},
//回填的时候文本框显示值的问题:
this.formItem.subordinate = res.data.data.result.apiApplicationGroupId
          setTimeout(() => {
            let self = this
            self.formItem.groupVal = res.data.data.result.apiGroupId
            for (let item of self.subordinateList) {
              if (self.formItem.subordinate === item.id) {
                self.groupList = item.children
              }
            }
}, 0);

}

猜你喜欢

转载自blog.csdn.net/weixin_43173924/article/details/89668121
今日推荐