el-select是ElementUI中的下拉选框组件，通常用于选择单个或多个值。在实际的开发中，我们需要获取选中的值来进行一些相关的操作。下面将从多个方面进行详细阐述el-select的选中值的获取。
一、获取select选中的值
要获取el-select组件选中的值，我们可以通过v-model指令来绑定一个data属性，然后在方法中获取该值。比如以下代码：
<template>
<div>
<el-select v-model="selectedValue">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
<button @click="getValue">获取选中值</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
},
methods: {
getValue() {
console.log(this.selectedValue);
}
}
}
</script>
在上面的代码中，我们绑定了一个data属性selectedValue，然后在getValue方法中获取了该值并输出。当用户选中某个选项时， selectedValue的值也会相应地改变。
二、el-select默认选中的option
有时，我们需要在el-select中默认选中某个option。可以通过给v-model绑定一个默认值来实现。比如以下代码：
<template>
<div>
<el-select v-model="selectedValue">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '2'
}
}
}
</script>
在上面的代码中，我们将selectedValue的默认值设置为'2'，则在渲染el-select时，'选项2'将会默认被选中。
三、vue获取select选中的值
如果我们使用vue去获取el-select中选中的值，则可以将v-model的值直接绑定到一个vue实例的data中，具体代码如下：
<template>
<div>
<el-select v-model="form.selectedValue">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
form: {
selectedValue: ''
}
}
}
}
</script>
上面的代码中，我们将el-select的value属性绑定到vue实例的form.selectedValue，然后可以直接通过 this.form.selectedValue 获取选中的值。
四、el-select清除选中
有时，我们需要通过代码的方式清除el-select当前选中的值，可以简单地将选中的值置为空。比如以下代码：
<template>
<div>
<el-select v-model="selectedValue">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
<button @click="clearValue">清除选中</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
},
methods: {
clearValue() {
this.selectedValue = '';
}
}
}
</script>
在上面的代码中，我们定义了一个clearValue方法，在点击按钮时将selectedValue的值设置为空，这样就可以清除el-select当前选中的值。
五、el-select无法选中
有时我们会遇到无法选中el-select的情况。一种常见的原因是el-select的数据项没有设置value属性。在el-option标签中设置value属性可以解决该问题。比如以下代码：
<template>
<div>
<el-select v-model="selectedValue">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
<el-option label="选项4"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
}
}
</script>
在上面的代码中，我们将'选项4'标签中的value属性去掉，则该选项将无法被选中。
六、el-select默认选中
有时，我们需要设置el-select的默认选中项，可以在mounted方法中通过代码来实现。比如以下代码：
<template>
<div>
<el-select ref="mySelect">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
this.$refs.mySelect.remoteMethod('2');
})
}
}
</script>
上面的代码中，我们在mounted方法中通过this.\$refs.mySelect.remoteMethod('2')来设置'选项2'被默认选中。
七、el-select动态添加值
有时，我们需要动态添加el-select的选项，可以通过给el-select组件的options绑定一个数组，然后在数组中添加新的选项来实现。比如以下代码：
<template>
<div>
<el-select v-model="selectedValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<button @click="addOption">添加选项</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{label: '选项1', value: '1'},
{label: '选项2', value: '2'}
]
}
},
methods: {
addOption() {
this.options.push({label: '选项3', value: '3'});
}
}
}
</script>
在上面的代码中，我们定义了一个options数组，然后在el-select的options属性中进行绑定，通过addOption方法向options数组中添加新的选项。
八、获取el-select选中的值和描述值
有时，我们需要获取el-select选中的值及其描述值。可以通过给el-option设置label属性来获取描述值。比如以下代码：
<template>
<div>
<el-select v-model="selectedValue">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
<button @click="getSelected">获取选中项值和描述值</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
}
},
methods: {
getSelected() {
let selectedOption = this.$refs.mySelect.selectedLabel;
console.log('描述值：' + selectedOption);
console.log('选中值：' + this.selectedValue);
}
}
}
</script>
在上面的代码中，我们通过this.\$refs.mySelect.selectedLabel来获取选中的option的描述值，通过选中的值是可以获取的。
