Element UI el-select选择器根据后台返回的值动态展示内容_el-select动态加载数据

需求：一个选择器的下拉框里面的内容是后台返回的数据，这种情况怎么处理呢？

1.HTML

<el-form-item>
   <el-select v-model="queryParams.cateName" placeholder="请选择系列分类查询">
      <el-option
          v-for="item in options1"
          :key="item.label"
          :label="item.label"
          :value="item.label">
      </el-option>
   </el-select>
</el-form-item>

2.data

 data() {
    return {
      queryParams: {
        cateName:"",//系列分类
      },
      options1:[],
    };
  },

3.js

methods:{
 //系列名
    async  bubble(){
      await  this.$api.operateMgmt.pageCateNameList().then(res=>{
        if(res.code==200){
          if(this.options1.length==0){
            this.options1 = res.data.records.map(res=>{
              return{
                label:res.cateName,
                value:res.gcId
              }
            })
          }
        }
      })
    },
}