el-select设置默认值(附:两个示例代码)
在Element UI的`el-select`组件中,默认值需要通过`v-model`指令来绑定。你可以直接在`v-model`中绑定默认值,也可以通过给`el-select`组件设置`value`属性来实现。

以下是两个示例代码:
1. 直接在`v-model`中绑定默认值的示例:
<template>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
selectedValue: 'option2' // 将默认选中的值绑定到selectedValue中
}
}
}
</script>在上述代码中,我们直接将`selectedValue`的初始值设置为了`'option2'`,因此在页面渲染时,`el-select`组件会自动选中`value`为`'option2'`的选项作为默认值。
2. 设置`value`属性来实现默认选择的示例:
<template>
<el-select v-model="selectedValue" placeholder="请选择" :value="defaultValue">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select></template><script>export default { data() { return { options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
], selectedValue: '', defaultValue: 'option3' // 将默认选中的值作为value属性的值
}
}
}</script>在这个例子中,我们将默认选中的值`'option3'`作为`el-select`组件的`value`属性值传入,这样在页面渲染时,`el-select`会将`value`属性所对应的选项作为默认值选中。
需要注意的是,无论哪种方式,所绑定的默认值必须与`<el-option>`的`value`属性对应的值匹配才能正常起作用。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/web/qdkf/4971.html
原文地址:https://tangjiusheng.cn/web/qdkf/4971.html
