vue中el-select绑定默认值的三种方式
el-select 是 Element UI 中的一个下拉选择框组件，它提供了多种方式来绑定默认值。在 Vue 中，我们可以使用 v-model 指令、:value 属性和 :default-first-option 属性来实现 el-select 的默认值绑定。接下来，我们将详细介绍这三种方式，并且给出示例代码。
使用 v-model 指令
v-model 指令是 Vue 中常用的数据双向绑定方式，也可以用来绑定 el-select 的默认值。我们可以在组件的 data 中定义一个变量，然后将其作为 v-model 的值，即可实现默认值的绑定。
示例代码：
<template>
<el-select v-model="selectedItem">
<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 {
selectedItem: '1',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
}
}
}
</script>
在上面的示例中，我们在组件的 data 中定义了 selectedItem 变量，并将其作为 el-select 的 v-model 值。在初始化时，我们将 selectedItem 设置为 ‘1’，即默认选中第一个选项。
使用 :value 属性
除了使用 v-model 指令，我们还可以使用 :value 属性来绑定 el-select 的默认值。该属性接受一个字符串或数组类型的值，用于设置默认选中的选项。
示例代码：
<template>
<el-select :value="selectedItem">
<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 {
selectedItem: '1',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
}
}
}
</script>
在上面的示例中，我们使用 :value 属性将 selectedItem 绑定到 el-select 的默认值中。在初始化时，我们将 selectedItem 设置为 ‘1’，即默认选中第一个选项。
使用 :default-first-option 属性
el-select 还提供了一个 :default-first-option 属性，用于设置是否默认选中第一个选项。如果将该属性设置为 true，则 el-select 将默认选中第一个选项。如果将其设置为 false，则不会默认选中任何选项。
示例代码：
<template>
<el-select :default-first-option="false" v-model="selectedItem">
<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 {
selectedItem: '',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
}
}
}
</script>
在上面的示例中，我们将 :default-first-option 属性设置为 false，表示不默认选中任何选项。在初始化时，我们将 selectedItem 设置为空字符串，即不选中任何选项。
需要注意的是，无论使用哪种方式来绑定 el-select 的默认值，在定义选项时，需要为每个选项设置一个唯一的 value 值。如果不设置 value 值，el-select 将无法正确地绑定默认值。
总之，Vue 中 el-select 绑定默认值的方式有多种，包括使用 v-model 指令、:value 属性和 :default-first-option 属性。在使用时，需要根据实际情况选择合适的方式，并为每个选项设置唯一的 value 值。
