日常的下拉框长这样:
<el-select
style="width: 100%"
v-model="editForm.provider.cooperatorId"
filterable
@focus="handleFocus('provider')"
remote
:remote-method="(query)=>{handleRemote(query,'provider')}"
v-el-select-loadmore="()=>loadmoreOptions('provider')"
>
<el-option
v-for="type in providerOptions"
:key="type.value"
:label="type.label"
:value="type.value"
>
</el-option>
</el-select>
</el-form-item>
但是有时下拉列表会拼接一些信息,比如label拼接了name与id:
但是我只想展示微信公众号,而不要前面的编号,可以写为以下:
<el-select
style="width: 100%"
v-model="editForm.provider.cooperatorId"
filterable
@focus="handleFocus('provider')"
remote
:remote-method="(query)=>{handleRemote(query,'provider')}"
v-el-select-loadmore="()=>loadmoreOptions('provider')"
>
<el-option
v-for="type in providerOptions"
:key="type.value"
:label="type.cooperatorName" // 这里改变了
:value="type.value"
>
<span style="float: left">{{ type.label }}</span> // 这里改变了
</el-option>
</el-select>
</el-form-item>