html部分
<el-select
v-model="temp.resourceId"
value-key="temp.providerId"
placeholder="請(qǐng)選擇供應(yīng)商"
f
ilterable
clearable
@change="pickProviderName"> //回顯旬陡，增加一個(gè)改變事件
<el-option
v-for="option in options"
:key="option.resourceId"
:label="option.providerName"
:value="option.resourceId">
<span style="float: left">{{ option.providerName }}</span> //供應(yīng)商名
<span style="float: right; color: #8492a6; font-size: 13px">{{ option.resourceId }}</span> //供應(yīng)商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鑒權(quán)，如果是DNSPOD,就顯示
}
},
添加按鈕觸發(fā)下拉框
<el-button
class="filter-item"
style="margin-left: 10px;"
type="primary"
icon="el-icon-edit"
@click="handleCreate">{{ $t('table.add') }}
</el-button>
//添加賬號(hào)
handleCreate() {
this.resetTemp()
this.flgShow = true;
this.dialogStatus = 'create';
this.dialogFormVisible = true;
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
}),
//獲取下拉框數(shù)據(jù)
getProviderIdKey().then(response => {
let data = response.data.result;
this.options = data;
})
},
