select-option,多选与触发回显

html部分

<el-select
              v-model="temp.resourceId"
              value-key="temp.providerId"
              placeholder="请选择供应商"
              f
              ilterable
              clearable
            @change="pickProviderName">   //回显，增加一个改变事件
              <el-option
                v-for="option in options"
                :key="option.resourceId"
                :label="option.providerName"
                :value="option.resourceId">
                <span style="float: left">{{ option.providerName }}</span>   //供应商名
                <span style="float: right; color: #8492a6; font-size: 13px">{{ option.resourceId }}</span>  //供应商ID
<!--                <span style="float: left">{{ option.providerName }}</span>-->   
              </el-option>
           <!--              <option v-for="option in resourceId" v-bind:value="option.value">-->
<!--                {{ option.label }}-->
<!--              </option>-->
            </el-select>

js部分

  //获取providerName
      pickProviderName(val){
        let obj = {};  
        obj = this.options.find(option =>{
          return option.resourceId === val;    //val代表value值
        });
        this.temp.providerName = obj.providerName;   //providerName绑定
        if(obj.providerName === 'DNSPOD'){
          this.tokenShow =true; //将DNSDOD添加tonken鉴权，如果是DNSPOD,就显示
        }
      },

添加按钮触发下拉框

 <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate">{{ $t('table.add') }}
      </el-button>



      //添加账号
      handleCreate() {
        this.resetTemp()
        this.flgShow = true;
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        }),
          //获取下拉框数据
          getProviderIdKey().then(response => {
            let data = response.data.result;
            this.options = data;
          })

      },