ElementUI下拉组件el-select,从后端获取默认值,没有对应显示标签
如果你在使用ElementUI的el-select
下拉组件时,从后端获取的默认值没有对应的显示标签,你可以使用value-key
属性来指定响应对象中用作选项值的键名。
<template>
<el-select v-model="selectedValue" :value-key="valueKey" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: null, // 默认选中值
options: [], // 下拉选项
valueKey: 'id', // 响应对象中的值的键名
};
},
created() {
this.fetchOptions();
},
methods: {
fetchOptions() {
// 假设 getOptions 是获取选项的 API 调用
getOptions().then(response => {
this.options = response.data;
// 假设后端返回的默认值是一个id
this.selectedValue = response.defaultValueId;
});
},
},
};
</script>
在这个例子中,value-key
属性被设置为'id'
,这意味着el-select
会使用每个选项对象中的id
作为唯一标识来匹配默认值。确保你的options
数组中的每个对象都有一个与value-key
对应的属性。如果默认值对应的属性不是'value'
,则需要相应地更改value-key
的值。
评论已关闭