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